*{box-sizing:border-box} [hidden]{display:none!important} :root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#eaf0f4;background:#101820;color-scheme:dark}body{margin:0}button,input,select{font:inherit}button,select{border:1px solid #344550;border-radius:10px;background:#1a2731;color:inherit;padding:10px 15px}button{cursor:pointer}button:hover{background:#283b48}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #89dfbf;outline-offset:3px}.primary{background:#9cddbf;color:#10271f;border-color:#9cddbf;font-weight:700}.primary:hover{background:#c1efda}a{color:#9cddbf}.topbar{min-height:78px;padding:16px 5%;border-bottom:1px solid #2a3943;display:flex;justify-content:space-between;align-items:center;gap:15px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-size:22px;font-weight:800;direction:ltr}.brand small{display:block;font-size:10px;letter-spacing:1.5px;color:#9cabb6;margin-top:3px}.top-actions,.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.privacy{color:#9cddbf;font-size:13px;margin-inline-end:16px}#library{max-width:1380px;margin:auto;padding:0 5%}.intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:70px 0 55px}.eyebrow{color:#9cddbf;letter-spacing:1px;font-size:13px}h1{font-size:clamp(34px,4vw,54px);line-height:1.25;letter-spacing:-1.5px;margin:18px 0}h1 span{color:#a3b0bd}.intro p{color:#aab8c3;line-height:1.8}.import-box{background:linear-gradient(135deg,#1d3038,#16232d);border:1px dashed #4d706f;border-radius:22px;text-align:center;padding:32px 18px}.import-box.drag{border-color:#9cddbf;background:#294c44}.book-symbol{font-size:50px;color:#9cddbf}.import-box h2{font-size:21px}.import-box .actions{justify-content:center;margin:23px 0}.import-box small{font-size:10px;color:#9aafb7;display:block}.shelf{border-top:1px solid #2a3943;padding-top:20px}.shelf-title{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap}.shelf-title h2{font-size:22px}#count{font-size:14px;background:#263842;color:#b1c8cf;padding:3px 9px;border-radius:20px;margin:8px}.shelf-title button{font-size:12px;padding:8px 12px}.filters{display:flex;gap:15px;align-items:center;margin:20px 0;flex-wrap:wrap}.filters label,.reader-settings label{display:flex;gap:8px;align-items:center;color:#b3c2cb;font-size:13px}.search{flex:1;min-width:220px;border:1px solid #344550;border-radius:10px;padding:8px 13px;background:#17242e}.search input{background:none;border:0;color:#fff;outline:none;width:100%;padding:4px}.muted{color:#a2b3bf;font-size:12px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:23px;margin:25px 0}.book-card{min-width:0;position:relative;border:1px solid #30414d;border-radius:13px;overflow:hidden;background:#17232e}.book-open{display:block;width:100%;padding:0;border:0;border-radius:0;background:none;text-align:start}.cover{height:214px;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;background:linear-gradient(140deg,#365258,#182e3b);font-family:Georgia,serif;font-size:24px;line-height:1.4;overflow:hidden;word-break:break-word;color:#e5ead6;border-inline-start:6px solid #162832}.cover img{width:100%;height:100%;object-fit:contain}.cover:has(img){padding:0;border:0;background:#253440}.book-info{padding:14px}.book-info strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px;font-size:14px}.book-info small{display:block;color:#a6b7c0;margin-top:7px;font-size:11px}.book-card progress{display:block;width:100%;height:4px;accent-color:#9cddbf}.remove{font-size:11px;background:none;border:0;border-top:1px solid #283b48;border-radius:0;width:100%;padding:8px;color:#b3c2cb}.empty{text-align:center;padding:50px 15px 70px;color:#9dafbb}.empty h3{color:#cfdbe3}footer{border-top:1px solid #2a3943;padding:24px 0;color:#93a9b4;font-size:12px;line-height:1.9}.notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:14px 20px;background:#263e48;color:#fff;border:1px solid #567b7d;border-radius:12px;box-shadow:0 8px 30px #0008;max-width:90vw;z-index:100;white-space:pre-line}.notice.error{background:#512d30;border-color:#9e565b}dialog{background:#192933;color:#eaf0f4;border:1px solid #4a6572;border-radius:18px;max-width:620px;width:92vw;padding:28px;line-height:1.85}dialog::backdrop{background:#000a}#reader{position:fixed;inset:0;background:#eae6df;color:#18212a;z-index:30;display:flex;flex-direction:column;--paper:#faf8f3;--ink:#20262b}.reader-bar{display:flex;gap:9px;align-items:center;padding:10px 14px;background:#101820;color:#fff}.reader-bar strong{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px}.reader-bar button{font-size:13px}.reader-settings{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;background:#1a2731;padding:7px 12px}.reader-settings select{padding:5px 8px}.reader-settings input{width:95px}#viewport{flex:1;min-height:0;position:relative;background:var(--paper)}foliate-view{display:block;width:100%;height:100%;direction:ltr}.reader-bottom{display:flex;align-items:center;gap:15px;background:#101820;color:white;padding:10px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom));direction:ltr}.reader-bottom input{flex:1;min-width:40px;accent-color:#9cddbf;direction:ltr}.reader-bottom output{min-width:60px;font-size:12px;direction:ltr}#toc-panel{position:absolute;right:0;top:120px;bottom:62px;width:min(340px,90vw);background:#1a2731;color:#eee;padding:20px;overflow:auto;z-index:40;box-shadow:-10px 0 30px #0004}#toc-panel h2{font-size:17px}#toc-panel button{display:block;width:100%;text-align:start;border:0;margin:5px 0;font-size:13px}#reader[data-theme=dark]{--paper:#18232a;--ink:#e7e5dc}#reader[data-theme=sepia]{--paper:#efe2c7;--ink:#392f25}@media(max-width:720px){.topbar{padding:14px 4%}.brand{font-size:18px}.privacy{display:none}.top-actions button{padding:8px 10px;font-size:12px}.intro{grid-template-columns:1fr;gap:15px;padding:30px 0}.intro h1{font-size:36px}.intro br{display:none}.import-box{padding:20px 14px}.book-symbol{font-size:34px}.import-box h2{margin:8px}.import-box .actions{margin:14px 0}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.cover{height:200px}.filters{gap:10px}.search{flex-basis:100%}.shelf-title .actions{gap:4px}.shelf-title button{font-size:11px}.reader-bar{flex-wrap:wrap;gap:6px}.reader-bar strong{order:-1;flex-basis:100%;text-align:center}.reader-bar button{flex:1;padding:8px 6px;font-size:11px}.reader-settings{gap:7px;padding:6px}.reader-settings label{font-size:11px}.reader-settings select{font-size:11px}#toc-panel{top:165px}.reader-bottom{gap:8px}.reader-bottom button{font-size:12px;padding:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
#storage.at-risk{color:#f0b46a;background:#2b2015;border:1px solid #6b4d24;border-radius:8px;padding:8px 11px}

/* ---- Reader, Moon Reader style ---------------------------------------- */
/* Eight paper colours rather than three. The pairs are ground and ink; every
   other reader colour is derived from them, so a theme is one line to add. */
#reader[data-theme=day]{--paper:#ffffff;--ink:#1b1b1b;--accent:#1f6f5c}
#reader[data-theme=paper]{--paper:#faf8f3;--ink:#20262b;--accent:#265b6b}
#reader[data-theme=sepia]{--paper:#efe2c7;--ink:#392f25;--accent:#7a4a1e}
#reader[data-theme=parchment]{--paper:#e8dcc0;--ink:#3a3120;--accent:#7c5312}
#reader[data-theme=green]{--paper:#d7e7d0;--ink:#22301f;--accent:#2c6b3f}
#reader[data-theme=grey]{--paper:#d8d8d8;--ink:#232323;--accent:#3b5566}
#reader[data-theme=dark]{--paper:#18232a;--ink:#e7e5dc;--accent:#9cddbf}
#reader[data-theme=black]{--paper:#000000;--ink:#c9c9c9;--accent:#7fd6b4}

/* The chrome hides while reading and comes back on a centre tap. */
#reader.immersive .reader-bar,
#reader.immersive .reader-bottom{transform:translateY(var(--hide));opacity:0;pointer-events:none}
.reader-bar{--hide:-100%;transition:transform .2s ease,opacity .2s ease}
.reader-bottom{--hide:100%;transition:transform .2s ease,opacity .2s ease}

/* Tap zones sit over the page: edges turn, centre toggles the chrome. */
.tap-zones{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;z-index:5}
.tap-zones .tap{cursor:pointer}
.tap-zones.off{display:none}
#reader.scrolling .tap-prev,#reader.scrolling .tap-next{pointer-events:none}

/* Brightness is a dimming overlay: a web page cannot touch the backlight, but
   it can do what matters at 2am, which is stop the page being blinding. */
#dimmer{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:6}

/* Page-turn effect. */
#reader[data-animation=fade] #viewport foliate-view{transition:opacity .18s ease}
#reader[data-animation=fade].turning #viewport foliate-view{opacity:.25}
#reader[data-animation=slide].turning-next #viewport foliate-view{animation:slide-next .22s ease}
#reader[data-animation=slide].turning-prev #viewport foliate-view{animation:slide-prev .22s ease}
@keyframes slide-next{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}
@keyframes slide-prev{from{transform:translateX(-28px);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){
  #reader[data-animation] #viewport foliate-view{transition:none;animation:none}
}

/* The settings sheet slides up from the bottom, as on a phone. */
#settings-sheet{position:absolute;left:0;right:0;bottom:0;max-height:78%;overflow:auto;
  background:#141d24;color:#e9eef2;border-top:1px solid #2c3d49;border-radius:16px 16px 0 0;
  padding:14px 16px 22px;z-index:60;box-shadow:0 -14px 40px #0007}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sheet-head strong{font-size:15px}
.sheet-section{border-top:1px solid #24323c;padding-top:12px;margin-top:12px}
.sheet-section:first-of-type{border-top:0;margin-top:0}
.sheet-label{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:#8ea3b0;margin-bottom:9px}
.sheet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px 16px}
.sheet-grid label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:#b6c6d0}
.sheet-grid label.checkbox{flex-direction:row;align-items:center;gap:9px}
.sheet-grid input[type=range]{width:100%;accent-color:#9cddbf}
.sheet-grid output{font-variant-numeric:tabular-nums;color:#e9eef2}

.theme-row{display:flex;flex-wrap:wrap;gap:8px}
.swatch{border:2px solid transparent;border-radius:9px;padding:9px 13px;font-size:12.5px;
  font-weight:600;cursor:pointer;min-width:74px}
.swatch[aria-pressed=true]{border-color:#9cddbf;box-shadow:0 0 0 2px #9cddbf40}

.goto-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:12.5px;color:#b6c6d0}
.goto-row input{width:74px;background:#1b2731;border:1px solid #33465353;border-radius:7px;
  color:#e9eef2;padding:6px 8px}

/* Search inside the book. */
#find-panel{position:absolute;left:0;right:0;top:0;z-index:55;background:#141d24;
  border-bottom:1px solid #2c3d49;padding:11px 14px;max-height:58%;overflow:auto}
.find-row{display:flex;gap:8px;align-items:center}
.find-row input{flex:1;background:#1b2731;border:1px solid #334653;border-radius:8px;
  color:#e9eef2;padding:8px 11px}
#find-results{margin-top:10px;display:flex;flex-direction:column;gap:7px}
#find-results button{display:block;width:100%;text-align:start;font-size:12.5px;
  border:0;border-radius:7px;background:#1b2731;color:#cfdbe3;padding:8px 10px;line-height:1.5}
#find-results mark{background:#9cddbf;color:#10271f;border-radius:2px}

/* ---- Selection menu, lookup, notes, next-up ---------------------------- */
#select-menu{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:65;
  display:flex;gap:6px;align-items:center;background:#141d24;border:1px solid #2c3d49;
  border-radius:12px;padding:8px 10px;box-shadow:0 10px 30px #0007;flex-wrap:wrap;max-width:94vw}
#select-menu button{font-size:12.5px;padding:6px 10px}
.colours{display:flex;gap:5px}
.colour-dot{width:22px;height:22px;border-radius:50%;border:2px solid #ffffff22;padding:0;cursor:pointer}
.colour-dot:hover{border-color:#fff}

#lookup-panel,#next-panel{position:absolute;left:0;right:0;bottom:0;z-index:64;
  background:#141d24;color:#e9eef2;border-top:1px solid #2c3d49;border-radius:16px 16px 0 0;
  padding:14px 16px 20px;max-height:64%;overflow:auto;box-shadow:0 -14px 40px #0007}
#lookup-body p{margin:0 0 9px;font-size:14px;line-height:1.7;color:#c6d3dc}
.next-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.next-card{display:block;text-decoration:none;color:#dfe8ee}
.next-card img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;background:#233241}
.next-card span{display:block;font-size:12px;margin-top:6px;line-height:1.4}
.next-card em{display:block;font-size:11px;color:#93a6b2;font-style:normal}

.note-row{display:flex;gap:6px;align-items:flex-start;margin-bottom:8px}
.note-open{flex:1;text-align:start;border:0;border-inline-start:4px solid #ffd54a;
  border-radius:0 8px 8px 0;background:#1b2731;color:#d6e2e9;padding:8px 10px;font-size:12.5px;line-height:1.6}
.note-own{display:block;color:#9cddbf;margin-top:5px;font-style:normal}
.note-remove{border:0;background:none;color:#8ea3b0;padding:6px;cursor:pointer}
.wide{width:100%;margin-top:10px;font-size:12.5px}

/* ---- Library tools ------------------------------------------------------ */
.library-tools{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.library-tools button{font-size:12.5px;padding:8px 12px}
#library-find,#stats-panel,#sync-panel{background:#17242e;border:1px solid #2b3d49;
  border-radius:12px;padding:13px 15px;margin-bottom:16px}
#library-find-results{margin-top:11px;display:flex;flex-direction:column;gap:10px}
.find-hit strong{display:block;font-size:13px;margin-bottom:5px}
.find-note{display:block;width:100%;text-align:start;border:0;border-radius:7px;
  background:#1e2b35;color:#c3d2dc;font-size:12px;padding:7px 9px;margin-bottom:4px;line-height:1.5}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:11px;margin-top:12px}
.stat-tile{background:#1c2a34;border-radius:10px;padding:11px 13px}
.stat-tile b{display:block;font-size:1.4rem;font-variant-numeric:tabular-nums}
.stat-tile span{display:block;font-size:12px;color:#a8bac5;margin-top:2px}
.stat-tile small{display:block;font-size:11px;color:#7d8f9b;margin-top:3px}
.goal-bar{grid-column:1/-1;height:7px;border-radius:4px;background:#22323d;overflow:hidden}
.goal-bar span{display:block;height:100%;background:#9cddbf}
.goal-set{font-size:12px;color:#a8bac5;display:flex;align-items:center;gap:6px}
.goal-set input{width:62px;background:#1b2731;border:1px solid #334653;border-radius:6px;
  color:#e9eef2;padding:4px 7px}

.sync-row{display:flex;gap:9px;align-items:center;margin-top:11px;flex-wrap:wrap}
#sync-code{font-family:ui-monospace,Consolas,monospace;font-size:16px;letter-spacing:.12em;
  background:#1b2731;border:1px solid #334653;border-radius:8px;padding:8px 13px;color:#9cddbf}
#sync-enter{flex:1;min-width:180px;background:#1b2731;border:1px solid #334653;
  border-radius:8px;color:#e9eef2;padding:8px 11px}

.shelf-row{display:flex;gap:7px;flex-wrap:wrap;margin:6px 0 16px}
.shelf-chip{font-size:12px;padding:6px 11px;border-radius:20px}
.shelf-chip.on{background:#9cddbf;color:#10271f;border-color:#9cddbf;font-weight:600}

/* ---- E-ink: no motion, maximum contrast -------------------------------- */
#reader.eink *{transition:none!important;animation:none!important}
#reader.eink .reader-bar,#reader.eink .reader-bottom{background:#000;color:#fff}
#reader.eink button{border-color:#000;background:#fff;color:#000}

/* ---- PDF tools ---------------------------------------------------------- */
#pdf-tools{background:#16232d;border:1px solid #2b3d49;border-radius:14px;
  padding:15px 17px 20px;margin-bottom:18px}
.pdf-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 16px}
.pdf-file{display:inline-flex;align-items:center;gap:8px;background:#9cddbf;color:#10271f;
  font-weight:700;border-radius:10px;padding:10px 15px;cursor:pointer;font-size:13px}
.pdf-file.small{background:#1e2b35;color:#cfdbe3;font-weight:600}
.pdf-file input{display:none}
.pdf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:13px}
.pdf-card{background:#1b2731;border:1px solid #2c3d49;border-radius:11px;padding:13px 14px}
.pdf-card.wide-card{grid-column:1/-1}
.pdf-card h4{margin:0 0 5px;font-size:14px}
.pdf-card p{margin:0 0 10px;font-size:12.5px;color:#a2b4bf;line-height:1.6}
.pdf-card input[type=text],.pdf-card textarea{width:100%;background:#141e26;
  border:1px solid #334653;border-radius:8px;color:#e9eef2;padding:8px 10px;
  font:inherit;font-size:13px;margin-bottom:9px}
.pdf-card textarea{resize:vertical}
.pdf-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pdf-actions label{display:flex;align-items:center;gap:6px;font-size:12px;color:#a2b4bf}
.pdf-actions input[type=number]{width:66px;background:#141e26;border:1px solid #334653;
  border-radius:7px;color:#e9eef2;padding:5px 7px}
.pdf-card button{font-size:12.5px;padding:8px 12px}

#sign-pad{width:100%;max-width:520px;height:150px;background:#fff;border-radius:9px;
  border:1px dashed #6d8794;cursor:crosshair;touch-action:none;display:block;margin-bottom:10px}

.pdf-stage{position:relative;display:inline-block;max-width:100%;margin-top:11px;
  background:#0e161c;border-radius:9px;overflow:auto}
.pdf-stage canvas{display:block;max-width:100%}
#pdf-overlay{position:absolute;inset:0;cursor:crosshair;touch-action:none}

/* ---- A page that behaves like paper ------------------------------------ */
/* The turn is what a reader notices first. A curl reads as paper in a way a
   cross-fade never does, so the leaving page lifts from the spine edge and
   casts a shadow across the one underneath. */
#reader[data-animation=curl] #viewport{perspective:2200px}
#reader[data-animation=curl] #viewport foliate-view{
  transform-origin:left center;backface-visibility:hidden;
  will-change:transform,box-shadow}
#reader[data-animation=curl].turning-next #viewport foliate-view{
  animation:leaf-forward .42s cubic-bezier(.36,.06,.28,1)}
#reader[data-animation=curl].turning-prev #viewport foliate-view{
  animation:leaf-back .42s cubic-bezier(.36,.06,.28,1)}
@keyframes leaf-forward{
  0%{transform:rotateY(0) translateZ(0);box-shadow:none}
  45%{transform:rotateY(-16deg) translateZ(24px);
      box-shadow:22px 0 42px -12px rgba(0,0,0,.42)}
  100%{transform:rotateY(0) translateZ(0);box-shadow:none}}
@keyframes leaf-back{
  0%{transform:rotateY(0) translateZ(0);box-shadow:none}
  45%{transform:rotateY(16deg) translateZ(24px);
      box-shadow:-22px 0 42px -12px rgba(0,0,0,.42)}
  100%{transform:rotateY(0) translateZ(0);box-shadow:none}}

/* Slide the sheet sideways instead, for readers who prefer it. */
#reader[data-animation=push].turning-next #viewport foliate-view{
  animation:push-next .3s cubic-bezier(.3,.8,.3,1)}
#reader[data-animation=push].turning-prev #viewport foliate-view{
  animation:push-prev .3s cubic-bezier(.3,.8,.3,1)}
@keyframes push-next{from{transform:translateX(60%)}to{transform:none}}
@keyframes push-prev{from{transform:translateX(-60%)}to{transform:none}}

/* ---- Surfaces: the grain under the text -------------------------------- */
/* Drawn as gradients rather than shipped as images: it costs nothing to
   download, scales to any screen, and stays crisp on a phone. */
#viewport{position:relative}
#viewport::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  opacity:var(--grain,0);mix-blend-mode:multiply;background-image:var(--surface-art,none);
  background-size:var(--surface-size,180px 180px)}

#reader[data-surface=plain]{--grain:0}
#reader[data-surface=paper]{--grain:.5;--surface-size:150px 150px;
  --surface-art:repeating-linear-gradient(0deg,rgba(120,100,70,.05) 0 1px,transparent 1px 3px),
                repeating-linear-gradient(90deg,rgba(120,100,70,.045) 0 1px,transparent 1px 4px)}
#reader[data-surface=linen]{--grain:.6;--surface-size:26px 26px;
  --surface-art:repeating-linear-gradient(45deg,rgba(90,80,60,.07) 0 1px,transparent 1px 6px),
                repeating-linear-gradient(-45deg,rgba(90,80,60,.06) 0 1px,transparent 1px 6px)}
#reader[data-surface=parchment]{--grain:.75;--surface-size:340px 340px;
  --surface-art:radial-gradient(ellipse at 22% 18%,rgba(140,110,60,.13),transparent 55%),
                radial-gradient(ellipse at 78% 72%,rgba(120,95,50,.11),transparent 52%),
                radial-gradient(ellipse at 45% 90%,rgba(150,120,70,.09),transparent 45%)}
#reader[data-surface=canvas]{--grain:.5;--surface-size:8px 8px;
  --surface-art:repeating-linear-gradient(0deg,rgba(70,60,45,.09) 0 1px,transparent 1px 4px),
                repeating-linear-gradient(90deg,rgba(70,60,45,.08) 0 1px,transparent 1px 4px)}

/* ---- Surroundings: warmth, and the edges of the sheet ------------------ */
/* A screen at 2am is not a reading lamp. The warm layer takes the blue out;
   the vignette darkens the corners so the eye settles on the text. */
#warmth{position:absolute;inset:0;pointer-events:none;z-index:7;
  background:#ff8a20;opacity:0;mix-blend-mode:multiply;transition:opacity .3s}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.5) 100%)}
#reader[data-edges=on] #viewport foliate-view{
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 14px 34px -18px rgba(0,0,0,.55)}
#reader.eink #warmth,#reader.eink #vignette,#reader.eink #viewport::after{opacity:0!important}

/* ---- Right to left, spreads, scroll lock -------------------------------- */
#reader[data-dir=rtl] .reader-bottom{flex-direction:row-reverse}
#reader[data-dir=rtl] #toc-panel{right:auto;left:0;box-shadow:10px 0 30px #0004}
#reader.scroll-locked #viewport{overflow-y:hidden!important;touch-action:pan-x}
#reader[data-zoom-align=center] #viewport{display:flex;align-items:center;justify-content:center}
#reader[data-zoom-align=top] #viewport{display:flex;align-items:flex-start;justify-content:center}

/* ---- Speed reading ------------------------------------------------------ */
/* One word, always in the same place, so the eye never travels. */
#rsvp-panel{position:absolute;inset:0;z-index:70;background:var(--paper,#faf8f3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
#rsvp-word{font-size:clamp(30px,7vw,64px);font-family:Georgia,serif;color:var(--ink,#20262b);
  letter-spacing:-.01em;min-height:1.3em;text-align:center;padding:0 20px}
#rsvp-word b{color:#c0392b}
.rsvp-controls{display:flex;gap:11px;align-items:center;flex-wrap:wrap;justify-content:center}
.rsvp-controls output{font-variant-numeric:tabular-nums;color:var(--ink,#20262b);
  font-size:13px;min-width:78px;text-align:center}

/* ---- A textarea inside the settings sheet ------------------------------- */
.sheet-grid label.wide-label{grid-column:1/-1}
.sheet-grid textarea{background:#141e26;border:1px solid #334653;border-radius:8px;
  color:#e9eef2;font-family:ui-monospace,Consolas,monospace;font-size:12px;
  padding:8px 10px;resize:vertical;width:100%}
.sheet-grid input[type=file]{font-size:11.5px;color:#a2b4bf}

/* A reading ruler. Long lines are where tired eyes, and dyslexic ones, lose
   their place; a band that marks the current line is the oldest fix there is.
   It sits above the page and never takes a click, so paging still works. */
#ruler-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#ruler-overlay[hidden] { display: none; }
#ruler-overlay[data-mode="line"] {
  background: none;
  border-top: 2px solid rgba(120, 170, 255, .55);
  height: 0; inset: auto 0 auto 0;
  transform: translateY(var(--ruler-y, 50%));
}
#ruler-overlay[data-mode="band"] {
  background: linear-gradient(to bottom,
    rgba(0,0,0,.42) 0, rgba(0,0,0,.42) calc(var(--ruler-y, 50%) - 2.6em),
    rgba(0,0,0,0) calc(var(--ruler-y, 50%) - 2.6em),
    rgba(0,0,0,0) calc(var(--ruler-y, 50%) + 2.6em),
    rgba(0,0,0,.42) calc(var(--ruler-y, 50%) + 2.6em), rgba(0,0,0,.42) 100%);
}

/* The outline reads as a skeleton of the book: chapter, then what was marked
   under it, then any note of your own indented beneath the quote. */
.outline-chapter { display: block; margin: 14px 0 6px; opacity: .75; font-size: .95em; }
.outline-row { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.outline-quote { text-align: start; white-space: normal; }
.outline-row em { opacity: .8; padding-inline-start: 14px; }
#vocab-search { width: 100%; margin: 8px 0; }