@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Literata:opsz,wght@7..72,400;7..72,600&display=swap');

:root { --ink:#282622; --muted:#77736c; --line:#dedbd4; --paper:#fffefa; --chrome:#f4f2ed; --accent:#875b3b; --accent-dark:#6f472c; --shadow:0 18px 50px rgba(57,48,36,.10); }
* { box-sizing:border-box; }
.auth-mode-toggle { border:0; color:var(--accent); background:transparent; font-size:12px; }.auth-mode-toggle:hover { text-decoration:underline; }
.settings-dialog { width:min(520px,calc(100vw - 30px)); }.settings-dialog form { padding:24px; }.settings-section { margin-top:20px; }.settings-section h3 { margin:0; font-size:14px; }.settings-section>p { margin:4px 0 14px; color:var(--muted); font-size:12px; }.setting-choice,.setting-check { display:flex; align-items:flex-start; gap:10px; padding:11px; border:1px solid var(--line); cursor:pointer; }.setting-choice:first-of-type { border-radius:8px 8px 0 0; }.setting-choice+ .setting-choice { border-top:0; border-radius:0 0 8px 8px; }.setting-choice input,.setting-check input { margin-top:3px; }.setting-choice strong,.setting-choice small,.setting-check strong,.setting-check small { display:block; }.setting-choice strong,.setting-check strong { font-size:12px; }.setting-choice small,.setting-check small { margin-top:2px; color:var(--muted); font-size:10px; }.setting-check { margin-top:12px; border-radius:8px; background:#f8f6f1; }.paste-control { position:fixed; z-index:60; left:50%; bottom:38px; display:flex; align-items:center; gap:8px; padding:7px 8px 7px 12px; border:1px solid #3f3c37; border-radius:9px; color:#fff; background:rgba(40,38,34,.96); box-shadow:0 10px 30px rgba(0,0,0,.22); transform:translateX(-50%); font-size:11px; }.paste-control[hidden] { display:none; }.paste-control button { padding:5px 8px; border:0; border-radius:5px; color:#282622; background:#f2eee7; font-size:11px; font-weight:600; }.paste-control #paste-dismiss { padding:3px 6px; color:#c9c4bc; background:transparent; font-size:16px; }
.read-edit-button { display:none; }
.read-pages { display:none; position:fixed; z-index:35; top:0; bottom:0; left:0; width:154px; padding:18px 14px; color:var(--ink); background:rgba(240,237,231,.96); border-right:1px solid var(--line); box-shadow:8px 0 28px rgba(44,38,32,.12); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transform:translateX(-100%); transition:transform .2s ease; }.read-pages.open { transform:translateX(0); }.read-pages-heading { display:flex; align-items:baseline; justify-content:space-between; margin:0 2px 14px; }.read-pages-heading strong { font:600 15px "Literata",serif; }.read-pages-heading span { color:var(--muted); font-size:10px; }.read-page-list { height:calc(100% - 30px); display:grid; justify-content:center; align-content:start; gap:13px; overflow:auto; scrollbar-width:thin; }.read-page-thumb { display:grid; gap:5px; padding:0; border:0; color:var(--muted); background:transparent; font-size:9px; }.read-page-viewport { position:relative; width:102px; height:132px; overflow:hidden; border:1px solid #d4cfc7; background:var(--paper); box-shadow:0 3px 10px rgba(0,0,0,.08); }.read-page-thumb.active .read-page-viewport { border-color:var(--accent); box-shadow:0 0 0 2px rgba(135,91,59,.17),0 3px 10px rgba(0,0,0,.08); }.read-thumbnail-content { box-shadow:none!important; pointer-events:none!important; caret-color:transparent!important; }.read-pages-toggle { position:absolute; top:50%; left:100%; width:25px; height:58px; margin-top:-29px; padding:0; border:1px solid var(--line); border-left:0; border-radius:0 9px 9px 0; color:var(--muted); background:rgba(240,237,231,.96); box-shadow:5px 0 12px rgba(44,38,32,.08); font-size:21px; }.read-pages.open .read-pages-toggle { transform:rotate(180deg); }.read-pages.open .read-pages-toggle:hover,.read-pages-toggle:hover { color:var(--ink); }
body.read-mode .read-pages { display:block; }
@media (max-width:820px) { body.read-mode .read-edit-button { position:fixed; z-index:40; right:18px; bottom:18px; display:block; min-width:68px; height:42px; padding:0 16px; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:22px; color:#fff; background:rgba(40,38,34,.88); box-shadow:0 6px 22px rgba(0,0,0,.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:13px; font-weight:600; touch-action:none; user-select:none; -webkit-user-select:none; }.read-edit-button::after { content:""; position:absolute; left:10px; right:10px; bottom:5px; height:2px; border-radius:2px; background:#d9b08f; transform:scaleX(0); transform-origin:left; }.read-edit-button.holding::after { animation:read-hold .85s linear forwards; } }
@keyframes read-hold { to { transform:scaleX(1); } }
.invite-dialog { width:min(500px,calc(100vw - 30px)); }.invite-dialog form { display:grid; gap:14px; padding:24px; }.invite-dialog label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }.invite-dialog input { height:39px; padding:0 10px; border:1px solid var(--line); border-radius:7px; background:#fff; font-size:13px; text-transform:none; letter-spacing:0; }.invite-result { padding:12px; border:1px solid #cfd8cb; border-radius:8px; background:#f4f8f2; }.invite-result strong,.invite-result small { display:block; }.invite-result small { margin:3px 0 9px; color:var(--muted); }.invite-result div { display:flex; gap:7px; }.invite-result input { min-width:0; flex:1; font-size:10px; }
.margins-button { height:31px; display:flex; align-items:center; gap:5px; padding:0 7px; border:0; border-radius:6px; background:transparent; font-size:11px; }.margins-button:hover { background:rgba(0,0,0,.055); }.margins-button svg { width:18px; height:18px; fill:none; stroke:#514d47; stroke-width:1.35; }
.editor { padding:var(--margin-top,.85in) var(--margin-right,1in) var(--margin-bottom,.85in) var(--margin-left,1in)!important; }
@media print { .editor { padding:var(--margin-top,.85in) var(--margin-right,1in) var(--margin-bottom,.85in) var(--margin-left,1in)!important; } }
.margins-dialog { width:min(520px,calc(100vw - 30px)); }.margins-dialog form { padding:24px; }.margin-layout { margin:24px auto; display:grid; grid-template:58px 130px 58px / 115px 150px 115px; align-items:center; justify-content:center; text-align:center; }.margin-layout label { display:grid; gap:4px; color:var(--muted); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }.margin-layout label span { display:flex; justify-content:center; align-items:center; gap:4px; color:var(--muted); font-weight:400; text-transform:none; }.margin-layout input { width:60px; height:31px; padding:0 5px; border:1px solid var(--line); border-radius:6px; background:#fff; text-align:center; }.margin-top { grid-area:1/2; }.margin-left { grid-area:2/1; }.margin-page { grid-area:2/2; width:94px; height:122px; margin:auto; padding:15px 12px; border:1px solid #bdb7ae; background:#fff; box-shadow:0 5px 15px rgba(0,0,0,.08); }.margin-page div { width:100%; height:100%; border:1px dashed #c7a98d; background:repeating-linear-gradient(to bottom,transparent 0,transparent 8px,#ddd 9px); }.margin-right { grid-area:2/3; }.margin-bottom { grid-area:3/2; }.global-checkbox { display:flex; align-items:flex-start; gap:9px; padding:12px; border:1px solid var(--line); border-radius:8px; background:#f8f6f1; font-size:12px; cursor:pointer; }.global-checkbox input { margin-top:2px; }.global-checkbox strong,.global-checkbox small { display:block; }.global-checkbox small { margin-top:2px; color:var(--muted); }
html, body { margin:0; height:100%; color:var(--ink); background:var(--chrome); font-family:"DM Sans",system-ui,sans-serif; }
button, input, select { font:inherit; color:inherit; }
button, select, input[type=color] { cursor:pointer; }
.app-shell { height:100vh; display:grid; grid-template:64px minmax(0,1fr) / 282px minmax(0,1fr); overflow:hidden; }
.topbar { grid-column:1/-1; z-index:5; display:grid; grid-template-columns:282px 1fr auto; align-items:center; padding:0 22px; background:rgba(255,254,250,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:10px; font:600 18px "Literata",serif; }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; color:#fff; background:var(--ink); border-radius:8px; font:600 17px "Literata",serif; }
.document-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.document-title { width:min(480px,60vw); border:0; outline:0; background:transparent; font-weight:600; font-size:15px; }
.document-title:focus { box-shadow:0 1px var(--accent); }
.save-state { color:var(--muted); font-size:12px; white-space:nowrap; }
.save-state::before { content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#779278; vertical-align:1px; }
.save-state.saving::before { background:#c19a61; }
.topbar-actions { display:flex; gap:9px; }
.account-button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:50%; color:#fff; background:var(--accent); font-size:12px; font-weight:700; }
.button { border:1px solid var(--line); padding:8px 13px; border-radius:8px; background:var(--paper); font-weight:600; font-size:13px; }
.button.primary { border-color:var(--ink); color:#fff; background:var(--ink); }
.button.primary:hover { background:#111; }.button.secondary:hover { background:#f7f5f0; }
.export-control { position:relative; }.export-button { display:flex; align-items:center; gap:7px; list-style:none; user-select:none; cursor:pointer; }.export-button::-webkit-details-marker { display:none; }.export-button::marker { display:none; content:""; }.export-button svg { width:10px; height:7px; fill:none; stroke:var(--muted); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .16s ease; }.export-control[open] .export-button svg { transform:rotate(180deg); }.export-menu { position:absolute; z-index:20; top:calc(100% + 8px); right:0; width:265px; padding:6px; border:1px solid var(--line); border-radius:11px; background:var(--paper); box-shadow:0 16px 45px rgba(45,38,31,.16); }.export-menu[hidden] { display:none; }.export-menu button { width:100%; display:grid; grid-template-columns:37px 1fr; align-items:center; gap:10px; padding:9px; border:0; border-radius:7px; background:transparent; text-align:left; }.export-menu button:hover,.export-menu button:focus { outline:0; background:#f2efe9; }.export-menu strong,.export-menu small { display:block; }.export-menu strong { font-size:12px; }.export-menu small { margin-top:2px; color:var(--muted); font-size:10px; }.export-icon { display:grid; place-items:center; width:35px; height:29px; border:1px solid #d8d3ca; border-radius:5px; color:var(--accent); background:#fff; font-size:8px; font-weight:700; letter-spacing:.02em; }
.library { grid-row:2; min-height:0; padding:24px 16px; background:#ece9e2; border-right:1px solid var(--line); overflow:auto; transition:margin .2s; }
.library-header, .library-meta { display:flex; align-items:center; justify-content:space-between; padding:0 5px; }
.library h1 { margin:0; font:600 20px "Literata",serif; }
.icon-button, .format-button { border:0; background:transparent; border-radius:6px; }
.icon-button { display:grid; place-items:center; width:30px; height:30px; font-size:22px; color:var(--muted); }.icon-button:hover,.format-button:hover { background:rgba(0,0,0,.055); color:var(--ink); }
.search-box { height:38px; margin:19px 0; padding:0 9px; display:flex; align-items:center; gap:8px; border:1px solid #d8d4cc; border-radius:8px; background:rgba(255,255,255,.65); }
.search-box:focus-within { border-color:#9c8a78; box-shadow:0 0 0 3px rgba(135,91,59,.08); }
.search-box svg { width:17px; fill:none; stroke:var(--muted); stroke-width:1.8; }
.search-box input { width:100%; min-width:0; border:0; outline:0; background:transparent; font-size:13px; cursor:text; }
kbd { color:#99948c; font:11px "DM Sans"; border:1px solid #d2cec6; border-radius:4px; padding:1px 4px; }
.library-meta { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.text-button { border:0; padding:0; color:inherit; background:none; font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.document-list { margin-top:10px; display:grid; gap:4px; }
.document-card { position:relative; padding:11px 32px 11px 12px; border:1px solid transparent; border-radius:9px; cursor:pointer; }
.document-card:hover { background:rgba(255,255,255,.45); }.document-card.active { border-color:#ddd4c8; background:var(--paper); box-shadow:0 3px 12px rgba(57,48,36,.05); }
.document-card h3 { margin:0 0 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; }
.document-card p { margin:0; color:var(--muted); font-size:11px; }.document-card .delete-document { position:absolute; top:9px; right:7px; opacity:0; font-size:15px; }.document-card:hover .delete-document { opacity:1; }
.empty-state { padding:24px 12px; color:var(--muted); text-align:center; font-size:13px; line-height:1.6; }
.workspace { grid-column:2; grid-row:2; position:relative; min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) 28px; }
.toolbar-wrap { z-index:3; padding:12px 18px; border-bottom:1px solid var(--line); background:rgba(244,242,237,.93); backdrop-filter:blur(10px); overflow:auto hidden; }
.toolbar { width:max-content; min-width:100%; display:flex; justify-content:center; align-items:center; gap:4px; }
.toolbar select { height:32px; border:0; border-radius:6px; background:transparent; font-size:12px; }.toolbar select:hover { background:rgba(0,0,0,.045); }
.style-group { display:flex; align-items:center; }.style-group select { width:125px; font-weight:500; }.font-select { width:130px; }.size-select { width:55px; }
.compact { width:26px; height:30px; font-size:17px; }.divider { width:1px; height:21px; margin:0 6px; background:var(--line); }
.format-button { width:31px; height:31px; font-family:Georgia,serif; font-size:15px; }.strong { font-weight:700; }.italic { font-style:italic; }.underline { text-decoration:underline; }
.format-button.active { color:var(--accent); background:rgba(135,91,59,.12); box-shadow:inset 0 0 0 1px rgba(135,91,59,.12); }
.align-center-button svg { display:block; width:16px; height:16px; margin:auto; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; }
.format-button[data-command="justifyLeft"],.format-button[data-command="insertUnorderedList"],.format-button[data-command="insertOrderedList"] { font-family:"DM Sans",system-ui,sans-serif; font-weight:600; }
.zoom-button { font-family:"DM Sans",sans-serif; font-size:18px; }.toolbar .zoom-select { width:66px; text-align:center; }.fit-button svg { display:block; width:21px; height:21px; fill:none!important; stroke:#514d47!important; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }.fit-button svg * { fill:none!important; stroke:#514d47!important; }.fit-button.active { background:rgba(135,91,59,.1); }.fit-button.active svg,.fit-button.active svg * { stroke:var(--accent)!important; }
.color-button { position:relative; display:grid; place-items:center; width:31px; height:31px; border-radius:6px; font:600 15px Georgia,serif; cursor:pointer; }.color-button:hover { background:rgba(0,0,0,.055); }.color-button::after { content:""; position:absolute; bottom:3px; width:16px; height:2px; background:var(--picked-color,#282622); }.color-button input { position:absolute; opacity:0; width:1px; height:1px; }
.canvas { min-height:0; padding:24px; overflow:auto; background:#f4f2ed; }
.page-scaler { position:relative; width:8.5in; min-height:11in; margin:0 auto; }
.editor { position:absolute; top:0; left:0; width:8.5in; min-height:11in; margin:0; padding:.85in 1in; outline:0; color:#282622; background-color:var(--paper); background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(11in - 1px), rgba(91,81,68,.14) calc(11in - 1px), rgba(91,81,68,.14) 11in); background-size:100% 11in; box-shadow:var(--shadow); font:12pt/1.65 "Literata",Georgia,serif; caret-color:var(--accent); transform-origin:top left; }
.editor:focus { box-shadow:0 18px 50px rgba(57,48,36,.12),0 0 0 1px rgba(135,91,59,.12); }
.editor p { margin:0 0 .8em; }.editor h1,.editor h2,.editor h3,.editor .title { font-family:"Literata",Georgia,serif; line-height:1.18; }.editor .title { margin:1.1em 0 .75em; font-size:34pt; font-weight:600; letter-spacing:-.03em; }.editor h1 { margin:1.5em 0 .5em; font-size:24pt; }.editor h2 { margin:1.4em 0 .45em; font-size:18pt; }.editor h3 { margin:1.25em 0 .35em; font-size:14pt; }.editor blockquote { margin:1.3em 1.8em; padding-left:1em; border-left:2px solid var(--accent); color:#625b53; font-style:italic; }
.statusbar { display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-top:1px solid var(--line); color:var(--muted); background:#efede8; font-size:11px; }
.show-library { display:none; position:absolute; z-index:4; top:14px; left:8px; background:#fff; border:1px solid var(--line); }
body.library-hidden .app-shell { grid-template-columns:0 minmax(0,1fr); } body.library-hidden .library { margin-left:-282px; } body.library-hidden .show-library { display:grid; }
body.read-mode { overflow:hidden; background:var(--chrome); } body.read-mode .app-shell { display:block; height:100vh; overflow:hidden; } body.read-mode .topbar,body.read-mode .library,body.read-mode .toolbar-wrap,body.read-mode .statusbar,body.read-mode .show-library { display:none!important; } body.read-mode .workspace { display:block; width:100%; height:100vh; } body.read-mode .canvas { width:100%; height:100vh; padding:24px; } body.read-mode .editor { caret-color:transparent; cursor:default; } body.read-mode .editor:focus { box-shadow:var(--shadow); }
dialog { width:min(570px,calc(100vw - 30px)); padding:0; border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:0 24px 80px rgba(0,0,0,.22); } dialog::backdrop { background:rgba(37,33,29,.28); backdrop-filter:blur(2px); }
#style-form { padding:24px; }.dialog-heading { display:flex; justify-content:space-between; }.dialog-heading h2 { margin:3px 0; font:600 23px "Literata",serif; }.eyebrow { margin:0; color:var(--accent); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; }.dialog-copy { color:var(--muted); font-size:13px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:18px; }.form-grid .wide { grid-column:1/-1; }.form-grid label { display:grid; gap:5px; color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }.form-grid input,.form-grid select { width:100%; height:38px; padding:0 10px; border:1px solid var(--line); border-radius:7px; background:#fff; text-transform:none; letter-spacing:0; }.form-grid input[type=color] { padding:4px; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }.custom-style-list:not(:empty) { margin:15px 0; padding:10px; border:1px solid var(--line); border-radius:8px; }.custom-style-item { display:flex; justify-content:space-between; align-items:center; font-size:13px; }.custom-style-item button { border:0; color:#985b50; background:transparent; }
.toast { position:fixed; z-index:10; left:50%; bottom:36px; transform:translate(-50%,20px); padding:9px 14px; border-radius:8px; color:#fff; background:#282622; opacity:0; pointer-events:none; transition:.2s; font-size:12px; }.toast.show { opacity:1; transform:translate(-50%,0); }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.auth-dialog { width:min(420px,calc(100vw - 30px)); }.auth-dialog::backdrop { background:rgba(37,33,29,.42); backdrop-filter:blur(5px); }.auth-dialog form { display:grid; gap:13px; padding:30px; }.auth-brand { display:flex; align-items:center; gap:9px; margin-bottom:13px; font:600 18px "Literata",serif; }.auth-dialog h2 { margin:0; font:600 27px "Literata",serif; }.auth-dialog p { margin:0; }.auth-dialog label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }.auth-dialog input { height:41px; padding:0 11px; border:1px solid var(--line); border-radius:7px; background:#fff; font-size:14px; text-transform:none; letter-spacing:0; cursor:text; }.auth-dialog input:focus { outline:2px solid rgba(135,91,59,.17); border-color:var(--accent); }.auth-dialog .button { margin-top:4px; padding:11px; }.auth-error { min-height:16px; color:#a34d43; font-size:12px; }.auth-note { color:var(--muted); text-align:center; font-size:10px; }.account-menu { position:fixed; z-index:30; top:57px; right:160px; width:210px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); box-shadow:0 16px 45px rgba(45,38,31,.16); }.account-menu strong,.account-menu small { display:block; overflow:hidden; text-overflow:ellipsis; }.account-menu strong { font-size:12px; }.account-menu small { margin:2px 0 10px; color:var(--muted); font-size:10px; }.account-menu button { width:100%; padding:7px; border:0; border-radius:6px; background:transparent; text-align:left; font-size:12px; }.account-menu button:hover { background:#f2efe9; }
@media (max-width:820px) { .app-shell { grid-template-columns:0 minmax(0,1fr); }.library { position:fixed; z-index:8; top:64px; bottom:0; width:282px; margin-left:-282px; transition:margin .2s; box-shadow:10px 0 30px rgba(0,0,0,.1); } body.library-open .library { margin-left:0; }.topbar { grid-template-columns:auto 1fr; }.brand span:last-child,.save-state { display:none; }.topbar-actions .secondary { display:none; }.document-identity { padding-left:15px; }.workspace { grid-column:2; }.show-library { display:grid; }.canvas { padding:20px 18px 60px; }.editor { transform-origin:top left; width:8.5in; }.statusbar span:last-child { display:none; } }
@media print { @page { size:8.5in 11in; margin:0; }.topbar,.library,.toolbar-wrap,.statusbar,.show-library { display:none!important; }.app-shell,.workspace { display:block; height:auto; }.canvas { padding:0; overflow:visible; background:#fff; }.page-scaler { width:8.5in!important; height:auto!important; min-height:0; margin:0; }.editor { position:static; width:8.5in; min-height:0; margin:0; padding:.85in 1in; box-shadow:none; background-image:none; transform:none!important; } }