#app.basic-reader{display:block!important;background:#292e32!important;padding:10px!important;width:100%;height:100dvh;overflow:hidden;--basic-ink:#343a3d;--basic-gold:#9c7a3d}
#app.basic-reader>.library,#app.basic-reader>.library-scrim{display:none!important}
#app.basic-reader .stage{display:grid!important;grid-template-rows:minmax(0,1fr)!important;width:100%!important;height:100%!important;min-height:0;overflow:hidden;background:#f9f8f4;border:1px solid #b6b1a5;border-radius:14px;padding:0!important;box-shadow:0 2px 10px #0004}
#app.basic-reader.basic-menu-open .stage{padding-top:116px!important}
#app.basic-reader .stage-header,#app.basic-reader #pageStatus,#app.basic-reader .page-zone,#app.basic-reader #lockedIndicator,#app.basic-reader #libraryDrawerButton{display:none!important}
#app.basic-reader #viewerShell{grid-row:1!important;width:100%;height:100%;min-height:0;max-height:none;margin:0!important;padding:0!important;overflow:hidden;background:#f9f8f4;display:grid;place-items:center}
#app.basic-reader #paperWrap{width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:auto;filter:none;margin:auto}
#app.basic-reader #paper{width:100%;height:100%;background:white;border-radius:0;margin:auto}
#app.basic-reader #paper img{object-fit:contain}
#app.basic-reader #viewerShell.width-mode{display:block;overflow-y:auto;scroll-snap-type:none;overscroll-behavior:contain}
#app.basic-reader #viewerShell.width-mode #paperWrap,#app.basic-reader #viewerShell.width-mode #paper{height:auto;max-height:none;display:block;max-width:1500px;margin:auto}
#app.basic-reader.basic-locked #viewerShell{overflow:hidden!important;touch-action:none}
#basicReader{color:#343a3d;font-family:system-ui,-apple-system,sans-serif;--accent:#a3854c}
#basicReader[hidden],#basicReader [hidden]{display:none!important}
#basicReader button{min-width:44px;min-height:44px;border:1px solid #c9c3b6;border-radius:9px;background:#f3f0e8;color:#343a3d;font-family:inherit;box-shadow:none;font-size:24px;cursor:pointer;touch-action:manipulation}
#basicReader button:hover{background:#e5dcc6;border-color:#a3854c}
#basicReader button[aria-pressed=true]{background:#e5dcc6;border-color:#9b7c43}
#basicReader button:focus-visible,#basicReader input:focus-visible,#basicReader select:focus-visible{outline:3px solid #a3854c;outline-offset:2px}
#basicReader button:disabled{opacity:.4;cursor:default}
#basicReader #basicCorner{position:fixed;z-index:45;right:10px;top:10px;width:64px;height:64px;border:0;border-radius:0 14px 0 64px;background:#343a3d;color:#e6dcc5;padding:0 0 16px 18px;font-size:27px}
#app.basic-left #basicCorner{left:10px;right:auto;border-radius:14px 0 64px 0;padding:0 18px 16px 0}
#basicToolbar{position:fixed;top:11px;left:24px;right:24px;height:116px;border-bottom:1px solid #d4cec2;display:grid;grid-template-columns:180px minmax(0,1fr) auto;grid-template-rows:64px 44px;gap:0 16px;padding:0 64px 4px 12px;max-width:1700px;margin:auto;background:#f9f8f4;z-index:40}
#app.basic-left #basicToolbar{padding:0 12px 4px 64px}
.basic-brand{letter-spacing:3px;font:600 22px Georgia,serif;align-self:center;white-space:nowrap}.basic-brand small{display:block;font:10px system-ui;letter-spacing:2px;margin-top:5px;color:#8b7754}
#basicTitle{align-self:center;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:22px Georgia,serif}
#basicToolbar nav{display:flex;align-items:center;gap:6px}.basic-navigation{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px}#basicReader .basic-navigation button{min-height:34px;height:34px;font-size:21px;background:transparent;border-color:transparent}#basicPosition{font-size:13px;color:#6c6b66;min-width:54px;text-align:center}
#basicShade{position:fixed;inset:0;background:#18202355;z-index:60;backdrop-filter:blur(3px)}
#basicPanel{position:fixed;top:24px;bottom:24px;left:24px;width:min(410px,calc(100vw - 48px));z-index:61;background:#f9f8f4;border:1px solid #c6beac;border-radius:16px;box-shadow:0 12px 60px #0004;display:flex;flex-direction:column;padding:20px;overflow:hidden}
#basicPanel>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}#basicPanel h2{font:28px Georgia,serif;margin:0}#basicLibrary{display:flex;flex-direction:column;min-height:0;flex:1}#basicReader label{display:block;font-size:13px;font-weight:600;margin-bottom:14px}#basicReader input:not([type=checkbox]),#basicReader select{display:block;width:100%;margin-top:6px;border:1px solid #c9c3b6;border-radius:8px;min-height:44px;background:white;color:#343a3d;padding:8px 10px;font:16px system-ui}#basicList{overflow:auto;flex:1;min-height:0;margin:0 -5px;padding:4px 5px;overscroll-behavior:contain}#basicReader .basic-song{width:100%;text-align:left;padding:12px 14px;margin-bottom:8px;font-size:16px;background:#fff;border-color:#e0dbd1;display:block}#basicReader .basic-song strong{font-size:16px;font-weight:600;display:block}#basicReader .basic-song small{font-size:13px;display:block;color:#78756d;margin-top:5px}#basicReader .basic-song[aria-current=true]{background:#e3eee6;border-color:#9eb9a4}#basicStatus{font-size:12px;color:#77746c;margin-bottom:0}.basic-muted{font-size:14px;line-height:1.6;color:#77746c}#basicSettings{overflow:auto}#basicReader .basic-check{display:flex;align-items:center;gap:10px;font-size:15px}#basicReader input[type=checkbox]{width:22px;height:22px;accent-color:#9c7a3d}#basicReader .basic-full{font-size:15px;width:100%;margin-top:12px;padding:10px}#basicSettings>small{color:#8b7754}
@media(max-width:850px){#basicToolbar{grid-template-columns:1fr;grid-template-rows:35px 48px 38px;height:128px;gap:0;padding-left:4px;padding-right:44px}#app.basic-left #basicToolbar{padding-left:44px;padding-right:4px}.basic-brand{display:none}#basicTitle{font-size:19px}#basicToolbar nav{justify-content:center}#app.basic-reader.basic-menu-open .stage{padding-top:128px!important}.basic-navigation{gap:8px}#basicReader #basicCorner{width:54px;height:54px}}
@media(max-width:500px){#app.basic-reader{padding:6px!important}#basicReader #basicCorner{top:6px;right:6px}#app.basic-left #basicCorner{left:6px}#basicToolbar{left:14px;right:14px;top:7px;padding-right:20px}#app.basic-left #basicToolbar{padding-left:20px}#basicToolbar nav{gap:4px}#basicReader #basicPanel{inset:6px;width:auto;border-radius:12px;padding:16px}}

#basicReader .basic-navigation button{min-height:44px;height:44px}
@media(max-width:850px){#basicTitle{margin:0 24px}#basicToolbar{grid-template-rows:35px 48px 44px;height:135px}#app.basic-reader.basic-menu-open .stage{padding-top:135px!important}}

/* Basic 2: equal side tracks keep the title on the true screen centre. */
#basicLaunch{flex:none}
#basicLaunch svg{width:20px;height:20px;pointer-events:none}
#basicReader button svg{display:block;margin:auto;pointer-events:none}
#basicToolbar,#app.basic-left #basicToolbar{grid-template-columns:350px minmax(0,1fr) 350px;grid-template-rows:64px 44px;padding:0 64px 4px;gap:0 8px;height:116px}
#basicTitle{margin:0;width:100%;min-width:0}
#basicToolbar nav{justify-content:flex-end;gap:6px}
#basicReader #basicCorner{touch-action:manipulation}
#app.basic-reader #viewerShell:not(.width-mode){padding:0 46px!important}
.reader-image-pages{width:100%;height:100%;display:flex;gap:16px;justify-content:center;align-items:center}
.reader-image-pages>.single-page{flex:none}
.bounded-pdf-spread{gap:16px}
#app.basic-reader #paper{background:transparent}
#app.basic-reader .native-book,#app.basic-reader .native-page-frame{background:transparent}
#basicReader .basic-edge{position:fixed;top:calc(50% - 44px);width:44px;height:88px;min-height:88px;border:0;background:transparent;color:#817b6c;z-index:39;font-size:30px;border-radius:10px;opacity:.6}
#basicReader .basic-edge:hover,#basicReader .basic-edge:focus-visible{opacity:1;background:#e5dcc6}
#basicReader .basic-edge:disabled{opacity:.14}
#basicEdgePrevious{left:11px}#basicEdgeNext{right:11px}
#app.basic-reader #paperWrap{touch-action:pan-y;user-select:none;-webkit-user-select:none}
@media(max-width:1150px){
 #basicToolbar,#app.basic-left #basicToolbar{grid-template-columns:minmax(0,1fr);grid-template-rows:35px 48px 44px;height:135px;gap:0;padding:0}
 #basicToolbar .basic-brand{display:none}
 #basicTitle{width:calc(100% - 100px);margin:0 50px;font-size:19px}
 #basicToolbar nav{justify-content:center;gap:4px}
 #app.basic-reader.basic-menu-open .stage{padding-top:135px!important}
}
@media(min-width:1151px){#app.basic-reader.basic-menu-open .stage{padding-top:116px!important}}
@media(max-width:500px){
 #basicToolbar,#app.basic-left #basicToolbar{left:12px;right:12px}
 #basicReader #basicToolbar nav button{width:44px;min-width:44px;padding:0}
 #basicEdgePrevious{left:7px}#basicEdgeNext{right:7px}
}

/* An explicit grid track prevents an absolutely positioned native sheet from
   collapsing the percentage-sized paper wrapper to zero width. */
#app.basic-reader #viewerShell:not(.width-mode){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}

/* Basic 3: one 64px ribbon on roomy screens, preserving 44px touch targets. */
#basicToolbar,#app.basic-left #basicToolbar{height:64px;grid-template-columns:minmax(344px,1fr) minmax(100px,1fr) minmax(344px,1fr);grid-template-rows:64px;padding:0 64px;gap:0 12px;align-items:center}
#app.basic-reader.basic-menu-open .stage{padding-top:64px!important}
#basicToolbar .basic-leading{grid-column:1;grid-row:1;display:flex;align-items:center;gap:20px;min-width:0}
#basicToolbar .basic-brand{display:none}
#basicToolbar #basicTitle{grid-column:2;grid-row:1;width:100%;margin:0}
#basicToolbar nav{grid-column:3;grid-row:1;justify-content:flex-end}
#basicToolbar .basic-navigation{flex:none;gap:4px;justify-content:flex-start}
#basicReader #basicToolbar button{width:44px;min-width:44px;height:44px;padding:0}
@media(min-width:1600px){#basicToolbar .basic-brand{display:block;font-size:19px;letter-spacing:2px}#basicToolbar .basic-brand small{font-size:9px}}
@media(max-width:1150px){
 #basicToolbar,#app.basic-left #basicToolbar{height:92px;grid-template-columns:1fr 1fr;grid-template-rows:38px 48px;padding:0 8px;gap:0 12px}
 #basicToolbar #basicTitle{grid-column:1/-1;grid-row:1;width:calc(100% - 100px);margin:0 50px}
 #basicToolbar .basic-leading{grid-column:1;grid-row:2;justify-content:flex-start}
 #basicToolbar nav{grid-column:2;grid-row:2;gap:4px}
 #app.basic-reader.basic-menu-open .stage{padding-top:92px!important}
}
@media(max-width:700px){
 #basicToolbar,#app.basic-left #basicToolbar{height:132px;grid-template-columns:minmax(0,1fr);grid-template-rows:36px 48px 48px;padding:0;gap:0}
 #basicToolbar #basicTitle{grid-column:1;grid-row:1}
 #basicToolbar nav{grid-column:1;grid-row:2;justify-content:center}
 #basicToolbar .basic-leading{grid-column:1;grid-row:3;justify-content:center}
 #app.basic-reader.basic-menu-open .stage{padding-top:132px!important}
}

/* Basic 4: navigation brackets the centred title; page count follows the paper. */
#basicToolbar,#app.basic-left #basicToolbar{grid-template-columns:344px minmax(0,1fr) 344px}
#basicToolbar .basic-navigation{grid-column:2;grid-row:1;display:grid;grid-template-columns:44px 44px minmax(0,1fr) 44px 44px;gap:4px;min-width:0;width:100%;align-items:center}
#basicToolbar .basic-navigation #basicTitle{grid-column:3;grid-row:1;margin:0;width:100%;font-size:21px}
#basicToolbar .basic-navigation [data-action=previousSong]{grid-column:1}
#basicToolbar .basic-navigation [data-action=previousPage]{grid-column:2}
#basicToolbar .basic-navigation [data-action=nextPage]{grid-column:4}
#basicToolbar .basic-navigation [data-action=nextSong]{grid-column:5}
#basicToolbar .basic-navigation button{grid-row:1}
#basicReader #basicPosition{position:fixed;z-index:38;transform:translateX(-50%);height:24px;line-height:24px;padding:0 10px;min-width:54px;background:#f9f8f4e8;color:#6c6b66;border-radius:7px;pointer-events:none;font:12px/24px system-ui;text-align:center;white-space:nowrap;box-shadow:0 1px 4px #0001}
@media(max-width:1250px){
 #basicToolbar,#app.basic-left #basicToolbar{height:108px;grid-template-columns:minmax(0,1fr);grid-template-rows:56px 48px;padding:0;gap:0}
 #basicToolbar .basic-leading{display:none}
 #basicToolbar .basic-navigation{grid-column:1;grid-row:1;width:calc(100% - 112px);max-width:700px;justify-self:center}
 #basicToolbar .basic-navigation #basicTitle{font-size:19px}
 #basicToolbar nav{grid-column:1;grid-row:2;justify-content:center;gap:4px}
 #app.basic-reader.basic-menu-open .stage{padding-top:108px!important}
}

/* Basic 5: content-sized title group, one view toggle, no web wake controls. */
#wakeButton{display:none!important}
#basicToolbar,#app.basic-left #basicToolbar{grid-template-columns:294px minmax(0,1fr) 294px}
#basicToolbar .basic-navigation{display:flex;width:max-content;max-width:100%;justify-self:center;justify-content:center;gap:4px}
#basicToolbar .basic-navigation #basicTitle{width:auto;min-width:0;flex:0 1 auto;margin:0 8px}
#basicToolbar .basic-navigation button{flex:0 0 44px}
@media(max-width:1250px){
 #basicToolbar,#app.basic-left #basicToolbar{grid-template-columns:minmax(0,1fr)}
 #basicToolbar .basic-navigation{width:max-content;max-width:calc(100% - 112px)}
}

/* Basic 6: browser-independent, centred pictograms; tools opposite the corner. */
#basicReader #basicToolbar button,#basicReader .basic-edge,#basicReader #basicPanel>header button,#basicReader #basicCorner{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;appearance:none;-webkit-appearance:none}
#basicReader button svg{width:22px;height:22px;flex:0 0 22px;display:block;margin:0}
#basicReader #basicSettings .basic-full{display:flex;align-items:center;justify-content:center;gap:10px;line-height:1.4}
#basicToolbar nav{grid-column:1;justify-content:flex-start}
#basicToolbar .basic-leading{grid-column:3;justify-content:flex-end}
#app.basic-left #basicToolbar nav{grid-column:3;justify-content:flex-end}
#app.basic-left #basicToolbar .basic-leading{grid-column:1;justify-content:flex-start}
@media(max-width:1250px){
 #basicToolbar nav,#app.basic-left #basicToolbar nav{grid-column:1;grid-row:2}
 #basicToolbar nav{justify-content:flex-start}
 #app.basic-left #basicToolbar nav{justify-content:flex-end}
}

/* Basic 7: optical centre of the quarter-circle; compact toolbar edge inset. */
#basicReader #basicCorner svg{transform:translate(6px,-6px)}
#app.basic-left #basicCorner svg{transform:translate(-6px,-6px)}
#basicToolbar,#app.basic-left #basicToolbar{max-width:none;padding-left:8px;padding-right:8px}
#basicToolbar .basic-leading{padding-right:64px}
#app.basic-left #basicToolbar .basic-leading{padding-right:0;padding-left:64px}

#app.basic-left #basicReader #basicCorner{padding:0}

/* One discreet, indeterminate progress indicator above the retained reader. */
.basic-load-status{position:fixed;z-index:41;pointer-events:none;transform:translateX(-50%);box-sizing:border-box;width:220px;padding:12px 16px 14px;border:1px solid rgba(226,194,125,.3);border-radius:14px;background:linear-gradient(145deg,#263244,#141d2c);box-shadow:0 8px 28px #0003;color:#f5f1e8;font:500 12px/1.4 system-ui,sans-serif;letter-spacing:.025em;text-align:center}
.basic-load-track{display:block;height:3px;margin-top:9px;overflow:hidden;border-radius:99px;background:#ffffff20}
.basic-load-track>span{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b58c40,#f1d69a,#b58c40);animation:basic-load-slide 1.35s ease-in-out infinite}
@keyframes basic-load-slide{0%{transform:translateX(-110%)}100%{transform:translateX(345%)}}
@media(prefers-reduced-motion:reduce){.basic-load-track>span{animation:none;width:100%;opacity:.75}}

/* Native Safari selects may ignore padding until their native appearance is removed. */
#basicReader #basicCollection{appearance:none;-webkit-appearance:none;min-height:48px;height:48px;padding:10px 38px 10px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='m3 4 5 5 5-5' fill='none' stroke='%23878d99' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
#basicReader[data-input-mode=pointer] #basicCollection:focus{outline:none}
