/* Shared design tokens. Both FlyEnv origins load this stylesheet. */
:root {
  color-scheme: light;
  --paper: #f5f6f7;
  --card: #fff;
  --ink: #2b3035;
  --mute: #626971;
  --rule: #dce0e4;
  --accent: #176bb3;
  --on-accent: #fff;
  --wash: #edf3f8;
  --bar: #198bf2;
  --on-bar: #fff;
  --frame: 820px;
  --gutter: clamp(14px, 3vw, 24px);
  --bar-height: 50px;
  --hit: 44px;
  --radius: 4px;
  --gap: 12px;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "STSong", "SimSun", Georgia, serif;
}
body[data-theme="jade"] { --paper:#dce6db; --card:#e7eee2; --rule:#b6c8b8; --wash:#dbe7d8; }
body[data-theme="night"] {
  color-scheme:dark; --paper:#1d2421; --card:#252e29; --ink:#e1e8df;
  --mute:#afbeb3; --rule:#45534a; --accent:#a7cefb; --on-accent:#162940;
  --wash:#303d34; --bar:#204269;
}
* { box-sizing:border-box; }
body { margin:0; font:16px/1.65 var(--sans); background:var(--paper); color:var(--ink); }
button,input,select { font:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }
button { background:none; border:0; }
button,summary,select { cursor:pointer; }
a:hover,button:hover,summary:hover { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button:disabled,[aria-disabled="true"] { opacity:.55; cursor:default; }
h1,h2,h3,p { margin:0; }
h2 { font-size:20px; line-height:1.45; }
small,.byline,.hint,.crumb,.empty { color:var(--mute); }
small,.hint,.crumb { font-size:13px; }

/* Page shell: invariant positions on every route. */
.site-frame { width:calc(100% - 96px); max-width:var(--frame); min-height:100vh; min-height:100dvh; margin:0 auto; background:var(--card); }
.site-header,.reader-bar { display:grid; grid-template-columns:54px minmax(0,1fr) 54px; align-items:center; height:var(--bar-height); background:var(--bar); color:var(--on-bar); }
.site-header { --bar-side:var(--hit); grid-template-columns:var(--bar-side) minmax(0,1fr) var(--bar-side); }
.site-header:has(.bar-search) { --bar-side:calc(2 * var(--hit)); }
.site-header > h1 { grid-column:2; }
.site-header h1,.reader-bar strong { font:400 18px/2 var(--sans); text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.site-header a:hover,.reader-bar a:hover { color:var(--on-bar); text-decoration:underline; }
.site-header h1 a { display:inline-block; vertical-align:middle; line-height:var(--hit); max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.bar-start { display:flex; }
.bar-action { display:grid; place-items:center; width:var(--hit); height:var(--bar-height); }
.bar-home { justify-self:end; }
.bar-action:focus-visible { outline-color:currentColor; outline-offset:-3px; }
.site-main { padding:var(--gutter); }
.site-main:focus { outline:0; }
.skip { position:absolute; left:-10000px; }
.skip:focus { left:8px; top:8px; padding:6px; z-index:20; background:var(--card); }
#message { position:fixed; z-index:12; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--card); padding:6px 14px; border-radius:var(--radius); opacity:0; pointer-events:none; }
#message.show { opacity:1; }

/* Actions and fields use the same metrics for forms, account and reader controls. */
.primary,.outline,.chips a,.settings button,.settings select,.reader-panel button,.reader-panel select {
  display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:var(--hit);
  padding:7px 14px; border:1px solid var(--rule); border-radius:var(--radius); background:var(--card); font:500 15px/1.5 var(--sans);
}
.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.primary:hover { color:var(--on-accent); filter:brightness(.92); }
.link,.more,.reader-notes a,.user-link { color:var(--accent); }
.link,.more { display:inline-flex; align-items:center; min-height:var(--hit); gap:6px; font-size:14px; }
.actions,.chips { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.chips { margin-block:var(--gap); }
.chips .on,[aria-pressed="true"].outline,.reader-panel button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); background:var(--wash); }
.field { min-width:0; min-height:var(--hit); border:1px solid var(--rule); border-radius:var(--radius); padding:8px 12px; background:var(--card); }
.field:focus-within { outline:2px solid var(--accent); outline-offset:1px; }
.form-stack { display:grid; gap:var(--gap); }
.form-stack a:not(.primary):not(.outline) { color:var(--accent); }
.form-stack input { font:400 18px/18px var(--sans); }
.form-stack button,.form-stack a { font:300 14px/40px var(--sans); padding-block:0; }
.form-stack small { font:400 14px/18px var(--sans); }
.search-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-bottom:var(--gap); }
.search-form .input-wrap > svg { flex:none; }
.search-actions { display:flex; }
.search-submit { border-start-end-radius:0; border-end-end-radius:0; white-space:nowrap; }
.search-options { position:relative; }
.search-options > summary {
  display:grid; place-items:center; list-style:none; min-width:var(--hit); min-height:var(--hit); height:100%;
  border-radius:0 var(--radius) var(--radius) 0; border-inline-start:1px solid var(--on-accent);
  background:var(--accent); color:var(--on-accent);
}
.search-options > summary::-webkit-details-marker { display:none; }
.search-options > summary::after { content:""; width:8px; height:8px; border:solid currentColor; border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg); }
.search-options[open] > summary::after { transform:translateY(2px) rotate(225deg); }
.search-options:not([open]) .search-options-panel { display:none; }
.search-options-panel {
  position:absolute; z-index:3; inset-inline-end:0; top:calc(100% + 6px); width:12rem; max-width:calc(100vw - 2 * var(--gutter));
  padding:8px; border:1px solid var(--rule); border-radius:var(--radius); background:var(--card); box-shadow:0 3px 12px #1827341f;
}
.search-options-panel fieldset { margin:0; padding:0; border:0; min-width:0; }
.search-options-panel legend { padding:0 8px; font-size:14px; color:var(--mute); }
.search-options-panel label { display:flex; align-items:center; gap:8px; padding-inline:8px; min-height:var(--hit); font-size:15px; cursor:pointer; }
.search-options-panel input { margin:0; }
.search-options-panel .exact { border-top:1px solid var(--rule); }
.search-history a { max-width:100%; overflow-wrap:anywhere; }
.search-form + .sectionhead h2,.hot-searches h2,.popular-tags h2,.recent-searches h2 { font:500 24px/48px var(--sans); }
.input-wrap { display:flex; align-items:center; gap:8px; flex:1 1 200px; }
.input-wrap input { font:300 16px/16px var(--sans); width:100%; min-width:0; border:0; outline:0; padding:0; background:transparent; }
input[type="radio"],input[type="checkbox"] { accent-color:var(--accent); }
.exact { font-size:14px; }
.hint { margin-block:8px; }

/* Shared navigation, headings, rows and empty states. */
.icon-nav { display:grid; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column; border:1px solid var(--rule); }
.icon-nav a { min-height:66px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:7px 2px; font-size:14px; text-align:center; }
.icon-nav a+a { border-left:1px solid var(--rule); }
.icon-nav [aria-current] { box-shadow:inset 0 -2px var(--accent); color:var(--accent); }
.icon-nav a:hover,.category-card:hover,.list-row:hover { background:var(--wash); }
.sectionhead { display:flex; justify-content:space-between; align-items:center; gap:var(--gap); margin:20px 0 8px; }
.sectionhead:first-child { margin-top:0; }
.author-heading { flex-wrap:wrap; align-items:baseline; gap:4px var(--gap); }
.author-heading > h2 { min-width:0; overflow-wrap:anywhere; }
.author-heading > small { white-space:nowrap; }
.rank-heading { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:0 8px; }
.rank-heading > h2 { grid-area:1 / 1; }
.rank-heading > small { grid-area:1 / 3; white-space:nowrap; }
.rank-filter { display:contents; }
.rank-filter::details-content { display:contents; }
.rank-filter > summary {
  grid-area:1 / 2; justify-self:start; display:flex; align-items:center; gap:6px; min-width:var(--hit); min-height:var(--hit);
  color:var(--accent); font-size:15px; list-style:none;
}
.rank-filter > summary::-webkit-details-marker { display:none; }
.rank-filter > summary::after { content:""; width:7px; height:7px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:translateY(-2px) rotate(45deg); }
.rank-filter[open] > summary::after { transform:translateY(2px) rotate(225deg); }
.rank-filter > nav { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding-block:4px; border-block:1px solid var(--rule); }
.rank-filter:not([open]) > nav { display:none; }
.rank-filter > nav a { display:flex; align-items:center; padding:4px 8px; min-height:var(--hit); font-size:15px; }
.rank-filter > nav [aria-current="page"] { color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:.25em; }
.section-label { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 8px; }
.section-label + .more { flex:none; }
.content-title { font-size:20px; font-weight:700; line-height:1.5; margin:8px 0; }
.crumb { margin-bottom:var(--gap); font:300 14px/22px var(--sans); }
.list-row { display:flex; align-items:center; gap:var(--gap); min-height:var(--hit); padding:12px 2px; border-bottom:1px solid var(--rule); }
.list-row>svg,.row-end { margin-left:auto; flex-shrink:0; color:var(--mute); }
.row-end { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.list-row small,.category-card small { display:block; font:400 14px/22px var(--sans); }
.list-row strong { font:400 18px/27px var(--sans); }
.related-books { margin-top:20px; }
.related-books .list-row small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bookrow > div,.related-books .list-row > div,.ranking .list-row > div,.reading-history .list-row > div { min-width:0; overflow-wrap:anywhere; }
.book-list-row > .num { flex:none; }
.book-list-copy { flex:1; display:grid; grid-template-columns:fit-content(55%) minmax(0,1fr); align-items:center; gap:2px 6px; min-width:0; overflow-wrap:anywhere; }
.book-list-copy > strong { grid-column:1 / -1; font-weight:500; }
.book-list-copy > small { grid-area:2 / 1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.book-list-copy > .book-tag-summary {
  grid-area:2 / 2; display:block; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--mute); font:400 12px/20px var(--sans);
}
.book-list-copy > small:last-child,.book-list-copy > strong + .book-tag-summary { grid-column:1 / -1; }
.book-list-copy .book-list-tag {
  display:inline-block; max-width:100%; padding:0 5px; vertical-align:top; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; border-radius:var(--radius); background:var(--wash);
}
.book-list-copy .book-list-tag + .book-list-tag { margin-inline-start:3px; }
.history-actions { display:flex; justify-content:center; margin-block:var(--gap); }
.reading-history .inline-author { color:var(--mute); font-size:.85em; }
.category-card strong { font:300 16px/32px var(--sans); }
.empty { padding:24px 0; text-align:center; font-size:15px; }
.eyebrow { display:flex; align-items:center; gap:8px; color:var(--accent); font-size:13px; }
.eyebrow i { width:16px; height:2px; background:currentColor; }

/* Content components. */
/* The approved home masthead is the expanded variant of the site header. */
.home-frame { background:var(--paper); }
.home-frame .site-header { display:block; height:auto; }
.home-title { padding:38px 22px 26px; text-align:center; }
.home-title h1 { font:700 clamp(2.25rem, 2rem + 1vw, 2.5rem)/1.25 var(--sans); letter-spacing:.055em; margin:0 0 12px; }
.home-title p { font:300 18px/1.8 var(--serif); color:var(--on-bar); }
.home-frame .site-main { padding:0 0 46px; }
.home-frame .icon-nav { border-width:0 0 1px; background:var(--card); }
.home-frame .icon-nav a { padding:12px 0; gap:5px; font:300 16px/32px var(--sans); color:var(--mute); }
.home-frame .icon-nav svg { width:28px; height:28px; }
.home-frame .sectionhead { margin:24px 0 14px; }
.home-frame .sectionhead h2 { font:300 16px/24px var(--serif); }
.category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--rule); border-bottom:0; background:var(--card); }
.category-card { display:flex; align-items:center; gap:10px; padding:16px 19px; min-height:62px; border-bottom:1px solid var(--rule); }
.category-card:nth-child(odd) { border-right:1px solid var(--rule); }
.category-card:nth-child(4n+3),.category-card:nth-child(4n) { background:var(--paper); }
.category-icon { display:flex; color:var(--mute); }
.category-card:nth-child(3n+2) .category-icon { color:#947754; }
.category-card>svg { margin-left:auto; flex-shrink:0; color:var(--mute); }
.rank-entry { background:var(--card); display:flex; justify-content:center; align-items:center; gap:6px; min-height:var(--hit); margin-top:12px; border:1px solid var(--rule); }
.ranking,.identity { list-style:none; padding:0; margin:0; }
.num { font:700 21px/1.5 var(--sans); color:var(--mute); min-width:26px; font-variant-numeric:tabular-nums; }
.ranking[start="1"] li:nth-child(-n+3) .num { font:700 21px/1.5 var(--sans); color:var(--accent); }
.book-cover { display:block; position:relative; overflow:hidden; border-radius:var(--radius); }
.book-cover > :is(img,canvas) { display:block; position:absolute; inset:0; width:100%; height:100%; }
.book-cover > img { object-fit:cover; }
.jacket > img { object-fit:contain; }
.book-cover > img ~ * { display:none; }
.bookrow .book-cover { flex:0 0 48px; height:60px; }
.shelf-row { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--rule); }
.shelf-row > .bookrow { flex:1; min-width:0; border-bottom:0; }
.shelf-row > .bookrow > svg { display:none; }
.shelf-remove { flex:none; min-width:var(--hit); justify-content:center; }
.detail,.gate,.sponsor-panel,.reader-notes { padding:var(--gutter); border:1px solid var(--rule); background:var(--wash); border-radius:var(--radius); }
.detail { display:flex; gap:20px; align-items:center; }
.detail-copy { flex:1; min-width:0; container:book-info / inline-size; }
.detail-meta,.detail-intro,.crumb:has(+ .detail) { overflow-wrap:anywhere; }
.detail p,.gate p,.sponsor-panel p { margin:8px 0; }
.detail .byline { font:400 16px/46px var(--sans); }
.detail .author-link { color:var(--accent); text-decoration:underline; text-underline-offset:.18em; }
.book-tags a { max-width:100%; padding-inline:10px; overflow-wrap:anywhere; font-size:14px; color:var(--accent); }
.detail .book-tags { gap:4px 6px; margin:6px 0; }
.detail .book-tags a { min-height:26px; padding:2px 8px; border-radius:10px; background:var(--wash); font:400 13px/1.45 var(--sans); }
.detail .book-tags a:hover { background:var(--card); text-decoration:underline; }
.detail p:not(.byline) { font:300 18px/36px var(--sans); }
.detail .actions a { font:300 18px/20px var(--sans); }
.detail .actions { flex-wrap:nowrap; }
.detail .actions > * { white-space:nowrap; }
@container book-info (max-width:365px) {
  .detail .actions { gap:clamp(3px, 1.5cqi, 6px); }
  .detail .actions > :is(a,button) {
    flex:1 1 auto;
    padding-inline:clamp(2px, 2cqi, 7px);
    gap:clamp(2px, 1cqi, 4px);
    font-size:clamp(13px, 4.5cqi, 16px);
  }
  .detail .actions svg { width:clamp(12px, 4cqi, 16px); }
}
@container book-info (max-width:240px) {
  .detail .actions > :is(a,button) { padding-inline:2px; gap:2px; }
}
@container book-info (max-width:210px) {
  .detail .actions svg { display:none; }
}
.jacket { flex:0 0 125px; height:172px; }
.jacket b { position:absolute; top:10px; right:12px; writing-mode:vertical-rl; background:#f6f2decc; color:#343c33; padding:4px; font:600 21px var(--serif); }
.identity { text-align:center; margin-bottom:var(--gap); }
.registration-preview,.identity { overflow-wrap:anywhere; }
.identity .link { font:inherit; }
.identity li { font:400 18px/36px var(--sans); min-height:var(--hit); display:grid; place-items:center; }
.reader-notes { color:var(--mute); font-size:18px; }
.reader-notes ol { padding-left:1.5em; margin:8px 0 0; }
.reader-notes li+li { margin-top:8px; }
.sponsor-panel fieldset { display:flex; flex-wrap:wrap; gap:var(--gap); border:0; padding:0; margin:14px 0; }
.sponsor-panel legend { margin-bottom:8px; }
.plan { display:flex; min-height:var(--hit); align-items:center; padding:8px 12px; gap:6px; border:1px solid var(--rule); border-radius:var(--radius); background:var(--card); cursor:pointer; }
.plan strong { font:400 16px/32px var(--sans); }
.sponsor-panel .hint { font:300 14px/22px var(--sans); }
.plan:has(:checked) { border-color:var(--accent); }
.gate .actions { margin-top:12px; }
.gate-plans { list-style:none; margin:8px 0; padding:0; }
.reader-tools,.page-turn { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.reader-tools a,.page-turn a,.page-turn span { display:inline-flex; align-items:center; min-height:var(--hit); gap:6px; }
.page-turn { border-block:1px solid var(--rule); margin:12px 0; font:400 16px/34px var(--sans); }
.book-pager { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; padding-block:4px; white-space:nowrap; }
.book-pager > :last-child { justify-self:end; }
.page-jump { display:flex; align-items:center; gap:6px; }
.page-jump input[type="number"] {
  width:3.4em; min-height:var(--hit); padding:0 4px; text-align:center;
  border:1px solid var(--rule); border-radius:var(--radius); color:var(--ink); background:var(--card);
  font:400 16px/1.5 var(--sans); appearance:textfield;
}
.page-jump input::-webkit-inner-spin-button,.page-jump input::-webkit-outer-spin-button { appearance:none; margin:0; }
.page-jump > span { color:var(--mute); }
.page-jump button { min-height:var(--hit); padding-inline:6px; color:var(--accent); font-weight:500; }
@media (max-width:360px) {
  .book-pager,.page-jump { gap:3px; }
  .book-pager { font-size:14px; }
  .page-jump input[type="number"] { width:2.7em; }
}
.prose { font:var(--reading-size,20px)/2 var(--serif); padding:12px 0; }
.prose .content-title { font-family:var(--serif); }
.prose p { text-indent:2em; margin:1em 0; overflow-wrap:anywhere; }
@media(max-width:600px) {
  .rank-filter > nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .book-list-row { gap:10px; padding-block:14px; }
  .detail {
    display:grid; grid-template-columns:clamp(58px,21vw,82px) minmax(0,1fr); align-items:start; gap:12px;
    container:book-info / inline-size;
  }
  .detail-copy { display:contents; container:none; }
  .detail > .jacket { grid-area:1 / 1; width:100%; height:auto; aspect-ratio:82 / 112; }
  .detail-meta { grid-area:1 / 2; min-width:0; }
  .detail-meta .content-title { margin:0; }
  .detail-meta .byline { margin:4px 0 0; font:400 15px/1.5 var(--sans); }
  .detail-meta .book-tags { margin:6px 0 0; }
  .detail .detail-intro,.detail .actions { grid-column:1 / -1; margin:0; }
  .jacket b { font-size:16px; }
  .category-card { padding:10px 8px; gap:7px; }
}
@media(max-width:350px) {
  .rank-filter > nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:660px) {
  .site-frame { width:100%; }
  .category-card { padding:12px 10px; min-height:62px; }
  .home-title { padding-top:40px; }
}
@media(max-width:550px) {
  .home-frame .sectionhead { margin-left:12px; }
}

/* The chapter is its own scrolling viewport. Opening the controls never moves the text. */
.chapter-screen { overflow:hidden; }
.chapter-screen .site-frame { width:100%; max-width:none; min-height:0; }
.chapter-screen .site-header,.chapter-screen .site-footer { display:none; }
.chapter-screen .site-main {
  --accent:var(--reader-ui); --on-accent:var(--reader-chrome);
  --wash:var(--reader-chrome); --rule:var(--reader-ui);
  position:relative; isolation:isolate; padding:0; height:100vh; height:100dvh; overflow:hidden;
  background-color:var(--reader-paper); color:var(--reader-ink);
}
.chapter-screen .site-main::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--reader-texture,none); opacity:.16;
}
.reading-surface { margin:auto; width:100%; max-width:800px; height:100%; overflow:auto; overscroll-behavior:contain; touch-action:pan-y pinch-zoom; padding-bottom:10px; }
.reading-surface:focus:not(:focus-visible) { outline:none; }
.reading-surface .crumb { padding:5px; margin:0; color:inherit; }
.chapter-notice { margin:6px 15px; border-radius:var(--radius); background:var(--notice-bg); color:var(--notice-ink); font:400 14px/1.5 var(--sans); white-space:pre-line; overflow-wrap:anywhere; }
.chapter-notice > :is(a,span) { display:block; padding:9px 12px; }
.chapter-notice a { align-content:center; min-height:var(--hit); color:inherit; text-decoration:underline; text-underline-offset:.15em; }
.chapter-notice a:focus-visible { outline-color:currentColor; outline-offset:-3px; }
.chapter-links { display:flex; align-items:center; gap:5px; width:94.67%; margin:10px auto; }
.chapter-links>* { flex:1; height:34px; text-align:center; overflow:hidden; border:1px solid currentColor; border-radius:4px; color:var(--reader-ui); font:400 16px/34px var(--sans); }
.chapter-links [aria-disabled] { border:0; }
.chapter-history { text-align:center; }
.chapter-history a { display:inline-flex; align-items:center; min-height:var(--hit); padding-inline:12px; color:var(--reader-ink,inherit); font-size:14px; text-decoration:underline; text-underline-offset:.15em; }
.chapter-screen :is(button:disabled,[aria-disabled="true"]) { opacity:.88; cursor:default; }
.reading-surface .prose { padding:0; font:var(--reading-size,20px)/2 var(--sans); }
.reading-surface .prose p { padding-inline:15px; margin:15px 0 0; text-indent:2em; font-weight:var(--reading-weight,400); }
.reading-surface .gate { margin:12px 15px; color:var(--reader-ui); }
.reading-surface .gate a:not(.primary) { text-decoration:underline; }
.reading-head,.reading-dock { position:absolute; z-index:3; inset-inline:0; background:var(--reader-chrome); color:var(--reader-ui); transition:transform .3s ease-in-out; }
.reading-head { top:0; height:56px; display:grid; grid-template-columns:64px 1fr 64px; align-items:center; text-align:center; transform:translateY(-100%); }
.reading-head div { display:grid; justify-items:center; }
.reading-head div span { font:400 12px/18px var(--sans); }
.reading-head strong { font:400 14px/18px var(--sans); }
.reading-head a,.reading-chapters>a,.reading-chapters>span,.reading-actions>* { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; gap:1px; font:400 12px/24px var(--sans); }
.reading-head a { height:56px; }
.reading-dock { bottom:0; height:130px; transform:translateY(100%); }
.tools-open .reading-head,.tools-open .reading-dock { transform:translateY(0); }
.reading-dock [data-page] { height:100%; max-width:800px; margin:auto; padding:10px 0; }
.reading-chapters { height:50px; display:grid; grid-template-columns:1fr minmax(0,1.9fr) 1fr; align-items:center; }
.chapter-meter { position:relative; display:grid; align-items:center; height:5px; }
.chapter-meter span { position:absolute; bottom:5px; width:100%; text-align:center; font:400 12px/24px var(--sans); }
.chapter-meter progress { appearance:none; width:100%; height:5px; border:1px solid currentColor; border-radius:2px; background:var(--reader-chrome); color:var(--reader-ui); }
.chapter-meter progress::-webkit-progress-bar { background:transparent; }
.chapter-meter progress::-webkit-progress-value { background:currentColor; }
.chapter-meter progress::-moz-progress-bar { background:currentColor; }
.reading-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); height:50px; margin-top:10px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:0 15px 10px; height:50px; font:400 14px/20px var(--sans); }
.panel-heading small { color:inherit; font-size:13px; }
.type-step,.mode-options,.paper-options { display:flex; align-items:center; }
.type-step { gap:6px; }.type-step button,.mode-options button { border:1px solid transparent; border-radius:4px; padding:4px 12px; min-height:32px; }
.type-step button { border:1px solid currentColor; }
.type-step button:disabled { border-style:dashed; }
.reading-dock .mode-options [aria-pressed="true"],.reading-dock .panel-heading [aria-pressed="true"] {
  border:1px solid var(--reader-ui); border-radius:4px; color:var(--reader-chrome); background-color:var(--reader-ui);
}
.mode-options { justify-content:center; gap:20px; }
.paper-options { gap:15px; padding:0 15px; overflow:auto; scrollbar-width:none; }
.paper-options button { width:80px; height:36px; flex:none; border-radius:16px; border:1px solid currentColor; background-color:var(--swatch); }
.paper-options [aria-pressed="true"]::after { content:"✓"; color:#263023; font-weight:700; }
.reading-head a:hover,.reading-dock button:hover,.reading-dock a:hover { color:inherit; }
@media(forced-colors:active) {
  .chapter-screen .site-main::before { display:none; }
  .reading-dock button[aria-pressed="true"] { outline:2px solid Highlight; outline-offset:-3px; }
  .paper-options button::before { content:attr(aria-label); }
  .paper-options [aria-pressed="true"]::after { color:ButtonText; }
  .chapter-meter progress { appearance:auto; }
}
@media(prefers-reduced-motion:reduce) { .reading-head,.reading-dock { transition:none; } }
[hidden] { display:none !important; }
.site-footer {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px;
  border-top:1px solid var(--rule); padding:5px var(--gutter); color:var(--mute);
  font:400 12px/1.6 var(--sans); overflow-wrap:anywhere;
}
.site-footer:not(:has(> *)) { display:none; }
.footer-friends,.footer-note,.footer-items { width:100%; min-width:0; }
.footer-friends h2 { margin-top:8px; color:var(--ink); font:500 14px/1.5 var(--sans); }
.footer-items,.footer-friend-items { display:flex; flex-wrap:wrap; align-items:center; gap:2px 14px; }
.footer-items { justify-content:space-between; min-height:var(--hit); }
.footer-items > *,.footer-friend-items > * { min-width:0; max-width:100%; }
.site-footer a {
  display:inline-flex; align-items:center; min-height:var(--hit); color:var(--accent);
  text-decoration:underline; text-underline-offset:.18em;
}
.footer-note { margin:4px 0; white-space:pre-line; }

@font-face {font-family:"Zbook Reader Icons";src:url("./paper/reader-icons.ttf") format("truetype");font-display:block;}
.reader-glyph {font:normal 23px/1 "Zbook Reader Icons";speak:never;}
.reading-head .reader-glyph {font-size:30px;}.panel-heading .reader-glyph {font-size:20px;vertical-align:middle;}
.password-value { white-space:pre-wrap; overflow-wrap:anywhere; }
.identity-password > div { max-width:100%; overflow-wrap:anywhere; }