:root { color-scheme: dark; --bg:#131415; --panel:#1c1e20; --line:#333638; --text:#f4f4f2; --muted:#a6abae; --accent:#bbd3c1; --danger:#ed9b97; --reader-size:20px; }
* { box-sizing:border-box; letter-spacing:0; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; min-height:100dvh; display:flex; flex-direction:column; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
button,input,select,textarea { font:inherit; }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color:transparent; }
:is(button,a,input,textarea,select,summary):focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.6; }
h1,h2,h3,p { margin:0; }
h1 { font:400 42px/1.15 Georgia,serif; overflow-wrap:anywhere; }
h2 { font-size:21px; line-height:1.3; font-weight:500; }
h3 { font-size:18px; line-height:1.35; font-weight:500; }
img { display:block; max-width:100%; object-fit:cover; }
strong { font-weight:600; }
.muted { color:var(--muted); }.small { font-size:13px; }.eyebrow { font-size:11px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.icon { display:inline-flex; flex:0 0 20px; width:20px; height:20px; vertical-align:middle; }
.icon svg { width:100%; height:100%; }
.button,.icon-button,.text-button,.quiet-link { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:44px; border-radius:5px; }
.button { background:var(--accent); color:#142119; padding:10px 17px; border:1px solid transparent; font-weight:500; }
.button:hover { background:#d0e3d4; color:#142119; }
.secondary { border-color:var(--line); background:transparent; color:var(--text); }
.secondary:hover { background:#282c2d; color:var(--text); }
.danger { background:#ab4545; color:white; }.danger:hover { background:#c65151; color:white; }
.icon-button { width:44px; flex:0 0 44px; background:transparent; border:1px solid transparent; color:inherit; }
.icon-button:hover { background:var(--panel); }
.text-button { padding:8px 0; border:0; color:inherit; background:none; justify-content:flex-start; }
.quiet-link { justify-content:flex-start; font-size:13px; color:var(--muted); }
.danger-text { color:var(--danger); }
.skip { position:absolute; top:-100px; left:12px; z-index:100; background:var(--panel); padding:12px; }.skip:focus { top:12px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px max(24px,calc((100% - 1180px)/2)); border-bottom:1px solid var(--line); min-width:0; }
.brand { display:flex; align-items:center; gap:12px; font:400 28px Georgia,serif; overflow-wrap:anywhere; min-width:0; }
.brand .icon { width:28px; height:28px; flex-basis:28px; color:var(--accent); }
.top-actions { display:flex; gap:26px; align-items:center; min-width:0; }
.user-menu { position:relative; min-width:0; }
summary { cursor:pointer; list-style:none; }summary::-webkit-details-marker { display:none; }
.user-menu summary { display:flex; align-items:center; gap:9px; min-height:44px; font-size:13px; }
.user-menu summary > span:not(.icon) { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-dropdown { position:absolute; right:0; top:calc(100% + 8px); width:230px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:8px; z-index:30; box-shadow:0 12px 25px #0005; }
.user-dropdown a,.user-dropdown button { display:flex; gap:12px; align-items:center; padding:10px; min-height:44px; width:100%; font-size:14px; }
.user-dropdown a:hover,.user-dropdown button:hover { background:#2a2d2e; border-radius:4px; }
.shell { width:min(1180px,calc(100% - 48px)); margin:40px auto 70px; flex:1; min-width:0; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:24px 0 34px; }
.page-head .muted { margin-top:12px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.continue-section { margin:34px 0; }
.continue-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.continue-item { display:flex; align-items:center; gap:20px; padding:14px 18px 14px 14px; background:var(--panel); border:1px solid var(--line); border-radius:6px; min-width:0; }
.continue-item img { width:60px; height:86px; flex-shrink:0; border-radius:3px; }
.continue-item > div { min-width:0; flex:1; }.continue-item h3 { overflow-wrap:anywhere; }.continue-item .eyebrow { margin-bottom:5px; }.continue-item p { margin-top:4px; }
.library-tools { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.tabs { display:flex; flex-wrap:wrap; gap:22px; }
.tabs a { display:flex; align-items:center; min-height:50px; padding:10px 0; color:var(--muted); border-bottom:2px solid transparent; font-size:14px; }
.tabs a.active { border-color:var(--accent); color:var(--text); }
.search { display:flex; gap:8px; align-items:center; max-width:100%; min-width:0; }
.search input { width:210px; min-width:0; border:0; background:none; padding:10px 0; }
.search .icon { color:var(--muted); }
.books-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 26px; }
.book-card { min-width:0; }.book-art { display:block; position:relative; overflow:hidden; aspect-ratio:2/3; background:var(--panel); border-radius:5px; border:1px solid #ffffff10; }
.book-art > img { width:100%; height:100%; object-fit:cover; transition:filter .2s ease; }
.cover-action { position:absolute; bottom:12px; left:12px; right:12px; background:#15191bea; color:#fff; border:1px solid #ffffff30; padding:10px; display:flex; align-items:center; justify-content:center; gap:9px; opacity:0; transform:translateY(4px); transition:opacity .2s,transform .2s; font-size:14px; }
.book-art:hover .cover-action,.book-art:focus-visible .cover-action { opacity:1; transform:none; }
.book-art:hover > img { filter:brightness(.9); }
.ribbon { position:absolute; right:-30px; top:17px; transform:rotate(45deg); width:120px; text-align:center; background:var(--accent); color:#16211b; font-size:11px; line-height:25px; font-weight:650; box-shadow:0 1px 3px #0005; }
.book-card-head { display:flex; align-items:flex-start; gap:4px; margin-top:14px; }.book-card-head h2 { font:400 22px/1.25 Georgia,serif; flex:1; padding-top:8px; overflow-wrap:anywhere; }.book-card .small { margin-top:4px; }
progress { display:block; width:100%; height:3px; border:0; margin-top:14px; appearance:none; background:var(--line); }progress::-webkit-progress-bar { background:var(--line); }progress::-webkit-progress-value { background:var(--accent); }progress::-moz-progress-bar { background:var(--accent); }
.empty { display:grid; justify-items:center; align-content:center; gap:20px; min-height:280px; padding:35px 10px; text-align:center; }.empty > .icon { width:36px; height:36px; color:var(--muted); }
.breadcrumbs { display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:12px; margin-bottom:24px; overflow-wrap:anywhere; }
.book-detail { display:grid; grid-template-columns:240px minmax(0,1fr); gap:50px; margin:36px 0 50px; }.detail-cover { width:240px; aspect-ratio:2/3; height:auto; border-radius:5px; }
.book-detail h1 { margin-bottom:16px; }.synopsis { margin:24px 0; max-width:65ch; line-height:1.8; overflow-wrap:anywhere; }
.chapters { margin:40px 0; }.chapter-row { position:relative; display:flex; align-items:center; gap:16px; min-height:72px; padding:16px 4px; border-top:1px solid var(--line); }.chapter-row > span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; }.chapter-number { font-size:13px; color:var(--muted); width:30px; flex:0 0 30px; }
.status { display:inline-flex; gap:6px; align-items:center; color:var(--muted); font-size:12px; }
.chapter-row:has(.new-label) { overflow:hidden; padding-right:60px; }
.new-label { position:absolute; right:-23px; top:12px; width:90px; transform:rotate(45deg); text-align:center; font-size:10px; line-height:20px; color:#16211b; background:var(--accent); }
.footer { padding:22px max(24px,calc((100% - 1180px)/2)); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.form { display:grid; gap:22px; }.form label { display:grid; gap:8px; font-size:13px; }.form-row { display:grid; grid-template-columns:1fr 2fr; gap:20px; align-items:center; }
input,textarea,select { width:100%; min-width:0; background:#191b1d; color:var(--text); border:1px solid #414547; border-radius:5px; padding:11px 12px; min-height:44px; font-size:16px; }
input[type=checkbox] { width:18px; min-height:18px; height:18px; accent-color:var(--accent); flex:0 0 18px; }
.form .check,.check { display:flex; align-items:center; gap:10px; min-height:44px; }
textarea { resize:vertical; line-height:1.65; }input[type=file] { padding:8px; }
.editor { max-width:900px; }.cover-editor { display:flex; align-items:center; gap:24px; padding:16px 0; }.cover-editor img { width:100px; height:145px; border-radius:4px; flex-shrink:0; }.cover-editor > div { flex:1; min-width:0; }.cover-editor p { margin-top:8px; }
.cover-details { border-block:1px solid var(--line); padding:14px 0; }.cover-details summary { min-height:32px; font-size:13px; color:var(--muted); }
.manuscript { font:18px/1.85 Georgia,serif; min-height:550px; padding:28px; color:white; }
.editor-save { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:15px; background:#191b1d; border-top:1px solid var(--line); padding:14px 0; z-index:10; }
.delete-form { margin:36px 0; }.admin-book { display:flex; align-items:center; gap:18px; border-top:1px solid var(--line); padding:18px 0; }.admin-book img { flex:0 0 56px; border-radius:3px; }.admin-book > div { flex:1; min-width:0; }.admin-book h2 { font-size:18px; overflow-wrap:anywhere; }
.admin-form-section { padding:24px 0 32px; border-block:1px solid var(--line); }.admin-form-section h2 { margin-bottom:22px; }.user-create { grid-template-columns:repeat(2,minmax(0,1fr)); }.user-create > button { justify-self:start; align-self:end; }
.user-row { border-bottom:1px solid var(--line); }.user-row summary { display:flex; align-items:center; gap:14px; min-height:80px; }.user-row summary > span:first-child { flex:1; display:grid; gap:3px; min-width:0; overflow-wrap:anywhere; }.user-row small { color:var(--muted); font-size:12px; }.user-row .form { padding:10px 0 24px; }
.narrow { max-width:550px; margin:35px 0; }.narrow h1,.narrow h2 { margin-bottom:24px; }.narrow > p { margin-bottom:28px; }
.login { width:min(420px,100%); margin:45px auto; }.login .brand { font-size:34px; }.login-rule { border-top:1px solid var(--line); margin:36px 0; }.login h1 { margin-bottom:28px; }.login > p:not(.eyebrow) { margin:24px 0 12px; }
.notice { border:1px solid #78918488; border-left:3px solid var(--accent); background:#202823; padding:12px 16px; margin-bottom:22px; border-radius:4px; }.notice.error { background:#2c2021; border-color:#a36d6d; }
dialog { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:24px; width:min(460px,calc(100% - 32px)); }dialog::backdrop { background:#0009; }.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }.dialog-head h2 { font-size:19px; }dialog p { margin:18px 0; }.actions { display:flex; gap:12px; justify-content:flex-end; }
.reader-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto 40px; flex:1; }.reading-page .topbar { display:none; }.reader-toolbar { position:sticky; top:0; background:#131415f7; border-bottom:1px solid var(--line); display:flex; gap:16px; align-items:center; justify-content:space-between; padding:10px 0; z-index:10; }.reader-toolbar > a { min-width:0; }.reader-toolbar > a > span:not(.icon) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:330px; }.reader-controls { display:flex; align-items:center; gap:8px; flex-shrink:0; }.reader-controls .icon-button { border:1px solid var(--line); }
.reader { max-width:720px; margin:55px auto 45px; overflow-wrap:anywhere; }.reader header { text-align:center; padding-bottom:35px; border-bottom:1px solid var(--line); margin-bottom:35px; }.reader h1 { font-size:38px; margin:10px 0 18px; }.reading-text { font:var(--reader-size)/1.85 Georgia,"Times New Roman",serif; color:#f4f4f4; }.reading-text p { margin:0 0 1.25em; white-space:normal; }.chapter-cover { width:100%; max-height:380px; object-fit:contain; margin:25px auto; }
.reading-pagination { max-width:720px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; gap:15px; align-items:center; border-top:1px solid var(--line); padding-top:24px; }.reading-pagination > :last-child { justify-self:end; }.reading-pagination > :first-child { justify-self:start; }
@media(max-width:1000px) { .books-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.topbar { padding-inline:24px; }.book-detail { gap:30px; grid-template-columns:200px minmax(0,1fr); }.detail-cover { width:200px; } }
@media(max-width:700px) {
  .shell { width:calc(100% - 32px); margin-top:26px; }.topbar { padding:12px 16px; gap:10px; }.brand { font-size:25px; }.top-actions { gap:8px; }.top-actions > .quiet-link { display:none; }.user-menu summary > span:not(.icon) { max-width:90px; }.user-menu summary > .icon:last-child { display:none; }
  h1 { font-size:34px; }.page-head { align-items:flex-start; flex-direction:column; gap:18px; margin-top:18px; }.page-head > .button { align-self:flex-start; }.continue-list { grid-template-columns:1fr; }.continue-item { gap:14px; padding:12px; }.section-head h2 { font-size:19px; }.section-head { flex-wrap:wrap; }
  .books-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 16px; }.book-card-head h2 { font-size:20px; }.book-card-head .icon-button { width:32px; flex-basis:32px; }.cover-action { display:none; }.tabs { gap:22px; }.library-tools { gap:4px; }.search { width:100%; border-top:1px solid var(--line); }.search input { flex:1; width:100%; }.library-tools .tabs { width:100%; justify-content:space-between; gap:10px; }
  .book-detail { grid-template-columns:1fr; gap:28px; }.detail-cover { width:165px; }.chapter-row { gap:10px; }.chapter-row .status { font-size:11px; }.form-row,.user-create { grid-template-columns:1fr; }.cover-editor { gap:16px; align-items:flex-start; }.cover-editor img { width:76px; height:114px; }.admin-book { flex-wrap:wrap; gap:12px; }.admin-book .button { margin-left:68px; }.admin-book > div { flex-basis:calc(100% - 68px); }
  .reader-shell { width:calc(100% - 32px); }.reader-toolbar { align-items:flex-start; flex-wrap:wrap; gap:4px; }.reader-toolbar > a { max-width:100%; }.reader-controls { width:100%; }.reader-controls [data-bookmark-status] { margin-left:auto; font-size:11px; }.reader { margin-top:32px; }.reader h1 { font-size:30px; }.reading-text { font-size:var(--reader-size); line-height:1.8; }.reading-pagination { gap:8px; }.reading-pagination .button { padding:10px 8px; font-size:12px; gap:3px; }.reading-pagination .icon { width:16px; height:16px; flex-basis:16px; }.manuscript { padding:16px; font-size:18px; }.footer { padding:20px 16px; }.login { margin:22px auto; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.cover-action,.book-art > img { transition:none; } }

/* The editor and reader share their prose rules; toolbar styles stay separate. */
.prose { overflow-wrap:anywhere; }
.prose :is(p,blockquote,ul,ol) { margin:0 0 1.15em; }
.prose :is(h2,h3) { font-family:Georgia,serif; font-weight:500; margin:1.5em 0 .7em; }
.prose h2 { font-size:1.4em; }.prose h3 { font-size:1.2em; }
.prose > :first-child { margin-top:0; }.prose > :last-child { margin-bottom:0; }
.prose strong { font-weight:700; }.prose blockquote { border-left:2px solid var(--accent); padding:4px 0 4px 1.1em; color:#cbd4cd; }
.prose :is(ul,ol) { padding-left:1.5em; }.prose li { padding-left:.2em; }.prose li > p { margin-bottom:.4em; }
.prose .align-left { text-align:left; }.prose .align-center { text-align:center; }.prose .align-right { text-align:right; }.prose .align-justify { text-align:justify; }
.prose hr { border:0; border-top:1px solid #737c76; width:80px; max-width:60%; margin:2.5em auto; }
.writing-field { min-width:0; }.writing-field > label { margin-bottom:10px; }
.rich-editor { border:1px solid var(--line); border-radius:6px; background:#181a1b; min-width:0; }
.writing-toolbar { position:sticky; top:0; z-index:12; display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; padding:7px; background:#232628; border-bottom:1px solid #3c4244; border-radius:5px 5px 0 0; }
.writing-style { width:150px; height:38px; min-height:38px; font-size:13px; padding:6px 8px; margin-right:6px; }
.tool-group { display:flex; gap:1px; border-left:1px solid #444a4c; padding:0 5px; }
.writing-toolbar .icon-button { width:36px; height:38px; min-height:38px; flex:0 0 36px; border-radius:4px; }
.writing-tool[aria-pressed=true] { background:#bcd3c1; color:#17251c; }
.writing-tool:not([aria-pressed=true]):hover { background:#383e41; }.writing-tool:disabled { opacity:.3; cursor:default; }
.writing-view-tools { margin-left:auto; }
.writing-surface { padding:32px 40px; }
.writing-document { min-height:180px; font:19px/1.85 Georgia,serif; outline:none; white-space:pre-wrap; }
.chapter-manuscript .writing-document { min-height:560px; }
.writing-document:focus-visible { outline:none; }.rich-editor:focus-within { border-color:#809d8a; }
.writing-document .ProseMirror-selectednode { outline:2px solid var(--accent); }
.writing-document .ProseMirror-gapcursor { display:none; pointer-events:none; position:absolute; }
.writing-document .ProseMirror-gapcursor::after { content:''; display:block; position:absolute; top:-2px; width:20px; border-top:1px solid var(--text); }
.writing-document.ProseMirror-focused .ProseMirror-gapcursor { display:block; }
.writing-document li { position:relative; }.writing-document li > p { margin-bottom:.35em; }
.writing-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px; padding:11px 16px; border-top:1px solid var(--line); color:var(--muted); font:12px/1.5 system-ui,sans-serif; }
.writing-error { margin:10px; font-size:13px; }
.rich-editor > .manuscript { border:0; }
.writing-focus { overflow:hidden; }
.rich-editor.is-focused { position:fixed; inset:0; z-index:100; border:0; border-radius:0; display:flex; flex-direction:column; background:var(--bg); }
.is-focused .writing-toolbar { flex-shrink:0; justify-content:center; border-radius:0; padding:10px max(10px,calc((100% - 1100px)/2)); }
.is-focused .writing-view-tools { margin-left:0; }.is-focused .writing-surface { flex:1; overflow-y:auto; padding:50px max(20px,calc((100% - 760px)/2)); scroll-padding-block:24px; }
.is-focused .writing-footer { flex-shrink:0; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
@media(max-width:700px) {
  .writing-toolbar { padding:5px 3px; gap:3px 0; }.writing-style { width:132px; font-size:13px; margin-right:2px; min-height:44px; height:44px; }
  .tool-group { padding:0 3px; }.writing-toolbar .icon-button { width:38px; flex-basis:38px; min-height:44px; height:44px; }
  .writing-surface { padding:24px 18px; }.writing-document { font-size:18px; }.chapter-manuscript .writing-document { min-height:400px; }
  .writing-footer { padding:10px 12px; font-size:11px; }.writing-view-tools { margin-left:0; }.is-focused .writing-toolbar { padding:5px 3px; justify-content:flex-start; }
  .is-focused .writing-surface { padding:25px 20px; }
}

.mobile-writing-header,.mobile-writing-launch { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.book-ratings { margin:30px 0; border-top:1px solid var(--line); padding-top:24px; }
.book-ratings h2 { font-size:18px; margin-bottom:12px; }
.rating { font:13px/1.5 system-ui,sans-serif; color:var(--muted); }
.rating > summary { display:flex; align-items:center; gap:9px; padding:10px 0; min-height:44px; }
.rating > summary > span:not(.icon) { min-width:0; overflow-wrap:anywhere; }
.rating-summary-value { margin-left:auto; white-space:nowrap; color:var(--accent); }
.rating > summary > .icon { width:16px; height:16px; flex-basis:16px; }
.rating-form { padding:6px 0 14px; }
.rating-form fieldset { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; border:0; padding:0; margin:0 0 10px; min-width:0; }
.rating-stars { display:flex; width:220px; flex-shrink:0; }
.rating-star { display:block; width:44px; height:44px; position:relative; }
.rating-outline,.rating-fill { position:absolute; left:0; top:8px; width:44px; height:28px; padding-left:8px; pointer-events:none; }
.rating-star .icon { width:28px; height:28px; }
.rating-fill { width:0; padding-left:0; overflow:hidden; color:var(--accent); }
.rating-fill .icon { margin-left:8px; }.rating-fill svg { fill:currentColor; }
.rating-fill.full { width:44px; }.rating-fill.half { width:22px; }
.rating-hit { position:absolute; top:0; height:44px; width:22px; cursor:pointer; border-radius:3px; }
.rating-hit.left { left:0; }.rating-hit.right { right:0; }.rating-hit.whole { left:0; width:44px; }
.rating-hit input { position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0; opacity:0; cursor:pointer; }
.rating-hit:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.rating-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.rating-actions .button { font-size:12px; min-height:40px; padding:7px 12px; }
.rating-form [data-rating-feedback] { margin-top:8px; }
.rating-form [data-rating-feedback]:empty { display:none; }
.rating-form [data-rating-feedback].error { color:var(--danger); }
.recent-rating { max-width:720px; margin:0 auto; }.recent-rating:empty { display:none; }
@media(max-width:700px) { .recent-rating { margin:0 20px; }.rating-actions .button { min-height:44px; } }
.editor-page-divider { display:block; clear:both; width:100%; margin:2.2em 0 1.5em; padding:12px 0; border-block:1px solid var(--line); color:var(--muted); font:12px/1.5 system-ui,sans-serif; text-align:center; user-select:none; scroll-margin-top:135px; }
.editor-page-divider[data-page-start="1"] { margin-top:0; border-top:0; padding-top:0; }
.is-focused .editor-page-divider { scroll-margin-top:12px; }
.editor-page-nav { display:flex; align-items:center; gap:4px; }
.editor-page-nav select { font-size:12px; min-height:44px; width:160px; padding:6px 8px; }
.editor-page-nav .icon-button { width:44px; flex-basis:44px; }
.writing-footer { align-items:center; background:#181a1b; }
.writing-footer [data-writing-state] { max-width:200px; }
.reader-preferences { position:relative; flex-shrink:0; }
.reader-preferences-panel { position:absolute; top:calc(100% + 6px); right:0; width:240px; max-width:calc(100vw - 32px); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:12px; box-shadow:0 8px 20px #0004; }
.reader-preferences-panel .reader-controls { margin-bottom:10px; }
.reader-page-jump { display:flex; align-items:center; min-width:0; gap:4px; }
.reader-page-jump select { font-size:13px; padding:8px; min-height:44px; width:160px; }
.reading-pagination { grid-template-columns:1fr auto 1fr; }
.reading-pagination > :nth-child(2) { justify-self:center; }
@media(max-width:700px) {
  .mobile-writing-launch { display:flex; margin-bottom:12px; width:100%; }
  .is-focused .mobile-writing-header { display:flex; flex-shrink:0; align-items:center; gap:4px; padding:max(5px,env(safe-area-inset-top)) 8px 5px; border-bottom:1px solid var(--line); background:var(--bg); }
  .mobile-writing-header [data-writing-title] { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
  .is-focused .writing-toolbar { display:none; }
  .is-focused.tools-open .writing-toolbar { display:flex; flex-wrap:nowrap; overflow-x:auto; max-height:54px; min-height:54px; padding:5px; gap:0; scrollbar-width:thin; }
  .is-focused .writing-toolbar .tool-group,.is-focused .writing-style { flex-shrink:0; }
  .is-focused .writing-toolbar .icon-button { width:44px; flex-basis:44px; }
  .is-focused .writing-view-tools { display:none; }
  .is-focused .writing-surface { padding:20px; min-height:0; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
  .is-focused .writing-document { min-height:100%; }
  .is-focused .writing-footer { display:grid; grid-template-columns:1fr auto; gap:2px 8px; padding:3px 12px max(5px,env(safe-area-inset-bottom)); }
  .is-focused .editor-page-nav { grid-column:1 / -1; justify-content:space-between; }
  .is-focused .editor-page-nav select { width:155px; text-align:center; }
  .is-focused [data-writing-count] { max-width:155px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .is-focused [data-writing-state] { max-width:145px; font-size:10px; text-align:right; }
  .is-focused .writing-error { flex-shrink:0; margin:4px 12px; }
  .reading-page .reader-shell { width:100%; margin:0; min-height:100dvh; }
  .reading-page .reader-toolbar { flex-wrap:nowrap; align-items:center; padding:5px 12px; gap:8px; min-height:54px; }
  .reading-page .reader-toolbar > a { flex:1; }
  .reading-page .reader-toolbar > a > span:not(.icon) { max-width:none; }
  .reading-page .reader { margin:24px 20px 110px; max-width:none; }
  .reading-page .reader header { padding-bottom:20px; margin-bottom:24px; }
  .reading-page .reader h1 { font-size:27px; margin:10px 0 12px; }
  .reading-page .reader .eyebrow { margin-bottom:6px; }
  .reading-page .reading-pagination { position:fixed; bottom:0; left:0; right:0; z-index:15; max-width:none; margin:0; padding:6px 12px max(6px,env(safe-area-inset-bottom)); background:var(--bg); gap:8px; grid-template-columns:44px minmax(0,1fr) 44px; }
  .reading-page .reading-pagination .button { min-width:44px; min-height:44px; padding:10px; }
  .reading-page .reading-pagination .button > span:not(.icon) { display:none; }
  .reading-page .reader-page-jump select { width:155px; max-width:100%; text-align:center; }
  .reading-page .reading-pagination .icon { width:20px; height:20px; flex-basis:20px; }
  .reading-page .reading-pagination > :last-child { width:44px; }
}
.mainhub-connect form + form { margin-top: 12px; }