:root{--system-surface:#101918;--system-raised:#212923;--system-soft:#313b35;--system-text:#edf3ed;--system-muted:#b8c9c0;--system-rgb:16,25,24}
body,#reader,.app-view,.picture-gallery,.picture-gallery-header,.reader-library,.reader-library header,#reader>header,body>header{background:var(--system-surface);color:var(--system-text)}
#reader .shade,#veil{background:linear-gradient(to bottom,rgba(var(--system-rgb),.12),rgba(var(--system-rgb),.22) 35%,rgba(var(--system-rgb),.78));background-color:rgba(var(--system-rgb),var(--reading-extra-dim,0))}
.picture-gallery{max-width:var(--reader-canvas-width,480px)}body:has(#reading){--reader-canvas-width:520px}
.reader-card-grid button,.reader-library input,.reader-library select,.library-picture-tools button,#reading-toolbar button,#public-toolbar button,dialog{background:var(--system-raised);color:var(--system-text)}
.reader-card-grid img,.reader-library .reader-card-grid img{width:100%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain;background:var(--system-raised)}
.reader-card-grid small,.picture-gallery-count{color:var(--system-muted)}
#reader,#reading,#scene .passage-text,#scene .passage-row{color:var(--system-text)}
.system-color-control{display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin:18px 0}.system-color-control input[type=color]{width:70px;height:42px;padding:3px;border:1px solid #819488;border-radius:8px;background:var(--system-raised)}
.picture-gallery-scroll{overflow-anchor:none}.picture-gallery-frame{flex-shrink:0;box-sizing:border-box;overflow-anchor:none}
#reader .shade,#veil{background-image:linear-gradient(to bottom,rgba(var(--system-rgb),.12),rgba(var(--system-rgb),.22) 35%,rgba(var(--system-rgb),.78))!important;background-color:rgba(var(--system-rgb),var(--reading-extra-dim,0))!important}

/* The atmosphere is an image-only layer, independent of settings initialization. */
#reader{isolation:isolate}
#reader #backdrop,#reader #backdrop-next{z-index:0}
#reader .shade{z-index:1;pointer-events:none}
#reader #scene{z-index:2}
#art,#art-next{z-index:0}#veil{z-index:1;pointer-events:none}#reading{z-index:2}
#reader .shade,#veil{background-color:transparent!important;background-image:linear-gradient(to bottom,rgba(var(--system-rgb),0) var(--shade-start,16%),rgba(var(--system-rgb),var(--shade-strength,.94)) var(--shade-end,48%))!important}
#reader #scene,#reader #scene p,#reader #scene .passage-row,#reader #scene .reading-prefix,#reading,#reading p{color:var(--reading-text-color,var(--system-text))!important}
.reading-setting-group{border:1px solid color-mix(in srgb,var(--system-text) 18%,transparent);border-radius:14px;margin:10px 0;padding:0 14px}
.reading-setting-group>summary{cursor:pointer;padding:15px 0;font-size:15px;font-weight:600;list-style:none;display:flex;justify-content:space-between}
.reading-setting-group>summary::after{content:'＋';font-weight:400;opacity:.65}.reading-setting-group[open]>summary::after{content:'−'}
.reading-setting-group>summary::-webkit-details-marker{display:none}.reading-setting-group>label{margin:12px 0 18px!important}
.reading-setting-group fieldset{border:0;padding:0;margin:10px 0 20px;min-width:0}.reading-setting-group legend{font-size:14px;color:var(--system-muted)}
.reading-palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:8px 0 18px}
#y-reading-details button.reading-swatch,#details button.reading-swatch,.reading-palette button.reading-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid transparent;border-radius:9px;padding:5px 2px;margin:0;background:transparent;color:var(--system-text);min-width:0}
.reading-swatch>span{display:block;width:28px;height:28px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #ffffff26}.reading-swatch>small{font-size:11px;white-space:nowrap}
.reading-swatch[aria-pressed=true]{border-color:var(--system-text)!important}.reading-setting-group .system-color-control{margin-bottom:6px!important}

/* Align atmosphere to the actual contained image, not the viewport. */
#reader .shade{inset:auto;left:var(--reader-image-x,0px);top:var(--reader-image-y,62px);width:var(--reader-image-w,100%);height:var(--reader-image-h,calc(100% - 62px))}
#veil{inset:auto;position:fixed;left:calc((100vw - min(100vw,520px))/2 + var(--reader-image-x,0px));top:var(--reader-image-y,62px);width:var(--reader-image-w,min(100vw,520px));height:var(--reader-image-h,calc(100% - 62px))}