@import url("./assets/fonts/typewriter.css") layer(legacy);
@layer legacy {
@scope (:root) to (.abc-app) {
/* Compatibility tools are scoped outside the approved application shell. */
/* styles.css */


:root { --bg:#f2f0eb; --surface:#faf9f6; --surface-2:#eae8e2; --text:#363633; --muted:#85847d; --line:#dad8d0; --accent:#6e7867; --accent-soft:#e1e5da; --shadow:0 5px 20px rgba(54,54,51,.06); --body-font:"RealTypeWriter Light", Georgia, serif; --heading-font:"RealTypeWriter Light", Georgia, serif; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:var(--body-font); transition:background .2s,color .2s; }
body { font-size:15px; letter-spacing:0; isolation:isolate; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:var(--image-opacity,0); background-image:var(--background-image); background-size:var(--image-size,100%) auto; background-position:center; background-repeat:no-repeat; z-index:-1; }
body[data-background="true"] .topbar,
body[data-background="true"] .writing-layout,
body[data-background="true"] .sidebar,
body[data-background="true"] .editor-panel { background:transparent; backdrop-filter:none; }
button, input, textarea, select { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
.app-shell { min-height:100vh; position:relative; }
.book-picker { display:grid; gap:8px; font-size:12px; color:var(--muted); }
.book-picker select { width:100%; min-width:0; padding:8px; background:var(--bg); border:1px solid var(--line); border-radius:6px; color:var(--text); }
.book-actions { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.volume-section { width:100%; margin-bottom:12px; }
.tree-row { display:flex; gap:4px; align-items:center; padding:6px 0; }
.tree-name { flex:1; min-width:0; text-align:left; overflow-wrap:anywhere; padding:4px; }
.tree-action { flex-shrink:0; padding:4px 2px; font-size:10px; color:var(--muted); }
.tree-action:hover { color:var(--accent); }
.volume-row.selected { border-bottom:1px solid var(--accent); }
.chapter-tree .chapter-item { padding:5px 0 5px 8px; }
button:disabled { cursor:default; opacity:.45; }
.volume-editor { display:flex; align-items:center; gap:12px; padding:15px 35px 0; font-size:12px; color:var(--muted); }
.volume-editor input { min-width:0; flex:1; border:0; border-bottom:1px solid var(--line); padding:7px; background:transparent; color:var(--text); }
.works-content { max-width:1400px; margin:0 auto; padding:0 46px 50px; }
.works-section { margin:0 0 35px; padding:25px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--surface) 80%,transparent); }
.works-section h2 { font-size:20px; margin:0 0 20px; }
.works-section h3 { font-size:15px; }
.works-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.work-card { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.work-open { width:100%; display:block; text-align:left; padding:15px; }
.work-open img,.cover-placeholder { width:100%; height:240px; object-fit:cover; border-radius:5px; }
.cover-placeholder { display:grid; place-items:center; background:var(--surface-2); color:var(--muted); }
[hidden] { display:none !important; }
.work-actions { display:flex; flex-wrap:wrap; gap:8px; padding:0 15px 15px; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.stat-card { padding:20px; background:var(--surface-2); border-radius:8px; display:grid; gap:12px; }
.stat-card span { color:var(--muted); font-size:12px; }
.records-table { width:100%; border-collapse:collapse; font-size:13px; }
.records-table th,.records-table td { text-align:left; border-bottom:1px solid var(--line); padding:12px 6px; }
.stats-extension { margin-top:20px; padding:20px; border:1px dashed var(--line); color:var(--muted); font-size:12px; }
.recycle-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; border-bottom:1px solid var(--line); padding:12px 0; }
.recycle-row span { flex:1; min-width:180px; font-size:13px; overflow-wrap:anywhere; }
.background-library { display:grid; gap:8px; margin:12px 0; }
.background-card { display:flex; align-items:center; gap:8px; padding:6px; border:1px solid var(--line); border-radius:8px; }
.background-card.selected { border-color:var(--accent); outline:1px solid var(--accent); }
.background-select { display:flex; align-items:center; gap:9px; flex:1; min-width:0; text-align:left; }
.background-select img { width:65px; height:48px; object-fit:cover; border-radius:4px; }
.background-select span { font-size:12px; overflow-wrap:anywhere; }
@media(max-width:620px) { .works-content { padding:0 12px 30px; }.works-section { padding:16px; }.stats-grid { grid-template-columns:1fr; }.topbar { flex-wrap:wrap; height:auto; min-height:62px; padding-block:8px; }.main-nav { flex-wrap:wrap; }.volume-editor { padding-inline:20px; } }
.topbar { height:72px; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 42px; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:11px; width:28%; font-family:var(--heading-font); font-weight:600; font-size:16px; }
.brand-mark { width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--accent); border-radius:50%; color:var(--accent); font-size:13px; }
.main-nav { display:flex; gap:5px; align-self:stretch; align-items:center; }
.nav-item { padding:8px 19px; border-radius:8px; color:var(--muted); transition:.2s; }
.nav-item:hover,.nav-item.active { color:var(--text); background:var(--surface-2); }
.top-actions { margin-left:auto; display:flex; gap:18px; align-items:center; }
.poem-switch { color:var(--muted); font-size:12px; transition:.2s; }.poem-switch:hover { color:var(--accent); }
.icon-button { color:var(--muted); font-size:18px; transition:.2s; }.icon-button:hover { color:var(--accent); transform:rotate(20deg); }
.module { display:none; }.module.active { display:block; }
.workspace-heading { max-width:1400px; margin:0 auto; padding:44px 46px 25px; display:flex; justify-content:space-between; align-items:end; }.eyebrow { margin:0 0 8px; font:11px Arial,sans-serif; letter-spacing:1.8px; color:var(--accent); }.workspace-heading h1 { margin:0; font:28px var(--heading-font); font-weight:500; }.save-state { color:var(--muted); font-size:12px; display:flex; gap:8px; align-items:center; }.status-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.writing-layout { max-width:1400px; min-height:calc(100vh - 180px); margin:0 auto 40px; display:grid; grid-template-columns:225px minmax(400px,1fr) 245px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:color-mix(in srgb,var(--surface) 76%,transparent); box-shadow:var(--shadow); }
.sidebar { padding:25px 18px; background:color-mix(in srgb,var(--surface-2) 38%,transparent); }.left-sidebar { border-right:1px solid var(--line); }.right-sidebar { border-left:1px solid var(--line); }.panel-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:23px; }.panel-heading h2 { margin:0; font-size:14px; font-weight:500; }.panel-heading.compact { margin:0 0 16px; }.small-icon { color:var(--muted); font-size:20px; line-height:1; }.small-icon:hover { color:var(--accent); }.book-title { display:flex; gap:7px; align-items:center; font-size:13px; font-weight:600; padding:7px 4px; }.tree-chevron { color:var(--muted); }.book-dot { width:7px; height:7px; border-radius:2px; background:var(--accent); }.chapter-tree { margin:7px 0 20px 18px; }.chapter-item { padding:10px 9px; border-radius:6px; color:var(--muted); font-size:13px; cursor:grab; transition:.2s; }.chapter-item:hover,.chapter-item.active { color:var(--text); background:var(--accent-soft); }.chapter-item.active { border-left:2px solid var(--accent); padding-left:7px; }.volume-label { color:var(--muted); font-size:11px; margin:17px 0 4px; }.add-volume { width:100%; text-align:left; color:var(--muted); font-size:12px; padding:9px 4px; }.add-volume:hover { color:var(--accent); }
.editor-panel { display:flex; flex-direction:column; min-width:0; background:var(--surface); }.editor-toolbar { padding:22px 35px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }.chapter-label { font-size:13px; }.muted { color:var(--muted); font-size:12px; }.toolbar-actions { display:flex; gap:14px; }.text-button { color:var(--muted); font-size:12px; }.text-button:hover { color:var(--accent); }.title-input { border:0; outline:0; background:transparent; padding:42px 70px 18px; font:25px var(--heading-font); color:var(--text); }.title-input:focus,.title-input:focus-visible { outline:none; box-shadow:none; }.editor { flex:1; width:100%; min-height:500px; resize:none; border:0; outline:0; background:transparent; padding:15px 70px 50px; font:17px/2 var(--body-font); color:var(--text); }.editor:focus,.editor:focus-visible { outline:none; box-shadow:none; }.editor-footer { border-top:1px solid var(--line); margin:0 35px; padding:13px 0; display:flex; justify-content:space-between; color:var(--muted); font:11px Arial,sans-serif; }
.resource-card { display:flex; align-items:center; gap:11px; padding:11px 8px; border:1px solid transparent; border-radius:8px; transition:.2s; }.resource-card:hover { background:var(--surface); border-color:var(--line); box-shadow:var(--shadow); }.resource-icon { width:31px; height:31px; border-radius:7px; display:grid; place-items:center; font-size:13px; }.warm { background:#e9ded2; color:#8c725e; }.green { background:#dfe6db; color:#687964; }.blue { background:#dce4e7; color:#687c82; }.resource-card strong { font-size:13px; font-weight:500; }.resource-card p,.recent-item p { margin:3px 0 0; color:var(--muted); font-size:11px; }.card-arrow { margin-left:auto; color:var(--muted); }.resource-divider { border-top:1px solid var(--line); margin:25px 0; }.recent-item { display:flex; gap:10px; align-items:start; padding:8px 0; }.recent-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; margin-top:5px; }.recent-dot.pale { background:#c8c9bf; }.recent-item strong { font-size:12px; font-weight:500; }
.placeholder-module { min-height:calc(100vh - 72px); place-items:center; }.placeholder-module.active { display:grid; }.placeholder-inner { text-align:center; }.placeholder-number { color:var(--accent); font:12px Arial,sans-serif; letter-spacing:3px; }.placeholder-inner h1 { font:38px var(--heading-font); margin:20px 0 12px; }.placeholder-inner p { color:var(--muted); margin:0 0 25px; }.primary-button,.small-button { background:var(--accent); color:#fff; border-radius:8px; padding:10px 18px; transition:.2s; }.primary-button:hover,.small-button:hover { filter:brightness(.9); }
.settings-drawer { position:fixed; z-index:10; right:0; top:0; bottom:0; width:390px; background:var(--surface); box-shadow:-10px 0 30px rgba(0,0,0,.12); transform:translateX(100%); transition:.25s; }.settings-drawer.open { transform:translateX(0); }.drawer-backdrop { display:none; position:fixed; inset:0; z-index:9; background:rgba(35,35,32,.18); }.drawer-backdrop.open { display:block; }.drawer-header { display:flex; justify-content:space-between; padding:33px 31px 24px; border-bottom:1px solid var(--line); }.drawer-header h2 { margin:0; font:23px var(--heading-font); }.close-button { color:var(--muted); font-size:26px; }.settings-content { padding:25px 31px; overflow:auto; height:calc(100% - 110px); }.setting-section { padding:0 0 25px; margin-bottom:25px; border-bottom:1px solid var(--line); }.setting-section h3 { margin:0 0 15px; font-size:13px; font-weight:500; }.theme-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.theme-option { border:1px solid var(--line); border-radius:8px; padding:11px; text-align:left; background:var(--theme-bg); color:var(--theme-text); font-size:12px; }.theme-option.selected { outline:2px solid var(--accent); outline-offset:1px; }.swatch { width:20px; height:20px; border-radius:50%; background:var(--theme-accent); margin-bottom:8px; }.custom-colors { display:flex; gap:12px; margin-top:16px; font-size:11px; color:var(--muted); }.custom-colors label,.range-row label { display:flex; align-items:center; gap:5px; }.custom-colors input { width:28px; height:22px; padding:0; border:0; background:none; }.field-label { display:block; color:var(--muted); font-size:12px; margin:13px 0; }.field-label select,.full-input,.font-import input { display:block; width:100%; border:1px solid var(--line); border-radius:6px; padding:9px; background:var(--bg); margin-top:7px; outline:0; }.font-import { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; }.font-import input { min-width:0; margin:0; }.small-button { padding:7px 10px; font-size:12px; }.range-row { display:flex; gap:18px; margin-top:15px; font-size:11px; color:var(--muted); }.range-row input { width:100px; accent-color:var(--accent); }.toast { position:fixed; z-index:20; bottom:28px; left:50%; transform:translate(-50%,20px); opacity:0; background:var(--text); color:var(--bg); padding:9px 16px; border-radius:6px; font-size:12px; transition:.2s; pointer-events:none; }.toast.show { opacity:1; transform:translate(-50%,0); }
.font-pack-actions { display:flex; align-items:center; gap:8px; margin:14px 0 10px; }.font-pack-actions .setting-hint { margin:0; }.font-import-list { display:grid; gap:7px; margin:15px 0 9px; }.font-import-row { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; }.font-import-row input { min-width:0; border:1px solid var(--line); border-radius:6px; padding:8px; background:var(--bg); outline:0; }.outline-button,.remove-button { border:1px solid var(--line); border-radius:6px; padding:7px 10px; color:var(--muted); font-size:12px; }.outline-button:hover,.remove-button:hover { border-color:var(--accent); color:var(--accent); }.batch-font-button { margin-left:6px; }.font-library { display:grid; gap:5px; margin-top:15px; }.font-library-item { display:flex; align-items:center; justify-content:space-between; padding:7px 9px; border-radius:6px; background:var(--surface-2); font-size:12px; }.font-library-item button { color:var(--muted); font-size:16px; }.font-library-item button:hover { color:#a56d66; }.image-actions { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }.upload-button { display:inline-block; border-radius:6px; padding:8px 11px; background:var(--accent); color:#fff; font-size:12px; cursor:pointer; }.secondary-upload { background:var(--surface-2); color:var(--text); border:1px solid var(--line); }.secondary-upload:hover { filter:none; border-color:var(--accent); color:var(--accent); }.upload-button:hover { filter:brightness(.9); }#backgroundFile,#fontPackFile { display:none; }.setting-hint { color:var(--muted); font-size:11px; margin:9px 0 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.range-row label { flex-wrap:wrap; }.range-row output { color:var(--accent); min-width:27px; }
@media (max-width:900px) { .topbar { padding:0 18px; }.brand { width:auto; margin-right:auto; }.brand>span:last-child { display:none; }.poem-switch { display:block; }.workspace-heading { padding:30px 20px 20px; }.writing-layout { margin:0 12px 20px; grid-template-columns:180px minmax(0,1fr); }.right-sidebar { display:none; }.title-input,.editor { padding-left:35px; padding-right:35px; } }
@media (max-width:620px) { .topbar { height:62px; }.main-nav { gap:0; }.nav-item { padding:7px 10px; font-size:13px; }.writing-layout { display:block; }.left-sidebar { border-right:0; border-bottom:1px solid var(--line); }.chapter-tree { display:flex; flex-wrap:wrap; gap:4px; margin-left:10px; }.chapter-item { padding:7px; }.editor { min-height:55vh; }.settings-drawer { width:100%; } }
@media (max-width:900px) {
  .topbar { display:grid; grid-template-columns:auto minmax(0,1fr); height:auto; min-height:62px; gap:6px 12px; padding:10px 18px 8px; }
  .brand { grid-column:1; grid-row:1; margin:0; }
  .top-actions { grid-column:2; grid-row:1; justify-self:end; min-width:0; gap:10px; margin:0; }
  .poem-switch { min-height:44px; padding:8px 4px; white-space:normal; line-height:1.6; }
  .top-actions .icon-button { flex-shrink:0; min-width:44px; min-height:44px; }
  .main-nav { grid-column:1 / -1; grid-row:2; justify-content:flex-start; flex-wrap:nowrap; gap:2px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; padding-bottom:2px; }
  .main-nav::-webkit-scrollbar { display:none; }
  .main-nav .nav-item { flex:0 0 auto; min-width:58px; min-height:44px; padding:7px 10px; }
}
#chapterPrintExport { display:none; }
@media print {
  body > :not(#chapterPrintExport) { display:none !important; }
  #chapterPrintExport { display:block; color:#000; background:#fff; font:12pt/1.8 serif; }
  #chapterPrintExport h1 { margin:0 0 1.5em; font-size:20pt; font-weight:normal; }
  .chapter-print-body { white-space:pre-wrap; overflow-wrap:anywhere; }
}
/* memo.css */
.memo-combo { display:block; min-width:0; }
.memo-combo input { width:100%; box-sizing:border-box; }
.memo-more { position:relative; }
.memo-more summary,.todo-settings summary { cursor:pointer; color:var(--muted); padding:8px 0; font-size:12px; }
.memo-more[open] { display:flex; flex-wrap:wrap; gap:8px; }
.todo-undo { display:flex; align-items:center; gap:16px; padding:10px 14px; background:var(--accent-soft); border-radius:8px; }
.todo-row.is-completing { animation:todo-file-away .42s ease both; pointer-events:none; }
.todo-row.is-completing .todo-main input[type=text] { text-decoration:line-through; }
.todo-row.is-completing input[type=checkbox] { animation:todo-check .25s ease; }
@keyframes todo-check { 50% { transform:scale(1.35); } }
@keyframes todo-file-away { 0%,45% { opacity:1; transform:translateX(0); } 100% { opacity:0; transform:translateX(22px); } }
@media(prefers-reduced-motion:reduce) { .todo-row.is-completing,.todo-row.is-completing input[type=checkbox] { animation:none; } }
.memo-content { max-width:1500px; margin:auto; padding:0 46px 45px; }
.memo-section { background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:24px; margin-bottom:25px; }
.memo-heading,.memo-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.memo-heading { justify-content:space-between; margin-bottom:18px; }
.memo-heading h2 { margin:0; font-family:var(--heading-font); font-size:21px; }
.memo-content input:not([type=checkbox]):not([type=range]),.memo-content textarea,.memo-content select { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; min-width:0; }
.memo-content input:focus,.memo-content textarea:focus,.memo-content select:focus { outline:2px solid var(--accent); outline-offset:1px; }
.memo-content textarea { resize:vertical; }
.memo-content label { font-size:13px; }
.memo-content .muted { font-size:12px; line-height:1.7; }
#todoText,#noteSearch { flex:1; min-width:150px; }
.todo-row { border-bottom:1px solid var(--line); padding:15px 0; }
.todo-main { display:flex; gap:10px; align-items:center; }
.todo-main input[type=text] { flex:1; }
.todo-row.done .todo-main input[type=text] { text-decoration:line-through; opacity:.65; }
.todo-time { display:flex; flex-wrap:wrap; gap:12px; font-size:11px; color:var(--muted); margin:10px 0; }
.todo-due { border-left:3px solid var(--accent); padding-left:12px; background:var(--accent-soft); }
.due-badge { font-size:12px; color:var(--accent); font-weight:bold; }
.memo-content details { margin-top:15px; }.memo-content summary { cursor:pointer; font-size:13px; }
.memo-filters { margin:18px 0; }.memo-filters select { max-width:220px; }
.notes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr)); gap:22px; align-items:start; }
.note-card { border:1px solid var(--line); border-radius:8px; padding:18px; background:var(--surface); box-shadow:var(--shadow); transition:box-shadow .2s,transform .2s; overflow:hidden; }
.note-card:hover { box-shadow:0 7px 24px #00000016; transform:translateY(-2px); }
.note-card[data-color=peach] { background:color-mix(in srgb,var(--surface) 82%,#ddaa90); }
.note-card[data-color=green] { background:color-mix(in srgb,var(--surface) 82%,#99b6a0); }
.note-card[data-color=blue] { background:color-mix(in srgb,var(--surface) 82%,#9bb2cf); }
.note-card[data-color=lavender] { background:color-mix(in srgb,var(--surface) 82%,#b4a0c9); }
.note-card[data-color=yellow] { background:color-mix(in srgb,var(--surface) 82%,#d8c584); }
.note-card input.note-title { width:100%; font-family:var(--heading-font); font-weight:bold; font-size:18px; background:transparent; border:0; padding:5px 0; }
.memo-content .note-card textarea.note-body { width:100%; min-height:180px; background:transparent; border:1px solid var(--line); padding:16px 20px; line-height:1.8; margin:10px 0; }
.note-card .memo-bar { gap:6px; margin:9px 0; }
.note-card .memo-bar input { flex:1; width:100%; }
.note-card .memo-bar select { flex:1; }
.note-card button { font-size:12px; }
.note-block { margin:14px 0; padding:10px; border:1px solid var(--line); border-radius:8px; }
.note-block input[type=text] { flex:1; width:100%; }
.note-block img { display:block; max-width:100%; height:auto; margin:auto; border-radius:8px; }
.note-table-wrap { overflow:auto; }.note-table { border-collapse:collapse; width:100%; }.note-table td { border:1px solid var(--line); padding:0; }.note-table input { width:100%; min-width:70px !important; border:0 !important; border-radius:0 !important; }
.mind-viewport { overflow:auto; max-height:420px; border:1px solid var(--line); border-radius:8px; touch-action:none; }.mind-svg { display:block; transform-origin:top left; }.mind-node { cursor:grab; touch-action:none; }.mind-node:active { cursor:grabbing; }.mind-node.selected rect { stroke:var(--accent); stroke-width:3; }
.record-form { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-top:20px; }.record-form label { display:grid; gap:6px; flex:1; min-width:130px; }.record-form label input,.record-form label select { width:100%; }
.memo-summary { display:flex; flex-wrap:wrap; gap:15px; padding:16px 0; }.memo-summary span { background:var(--surface-2); border-radius:8px; padding:12px 16px; font-size:13px; }
.record-chart { min-height:80px; }.record-chart svg { width:100%; max-height:320px; }.chart-legend { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; }.record-scroll { overflow:auto; }
.memo-alerts { position:fixed; bottom:25px; right:25px; z-index:60; max-height:60vh; overflow:auto; width:min(380px,calc(100vw - 30px)); }.memo-alert { padding:15px; margin-top:10px; background:var(--surface); border:2px solid var(--accent); border-radius:8px; box-shadow:var(--shadow); }.memo-alert button { float:right; }.memo-alert p { overflow-wrap:anywhere; }
.note-export { width:650px; padding:30px; background:var(--surface); color:var(--text); font-family:var(--body-font); line-height:1.8; }.note-export h2 { font-family:var(--heading-font); }.note-export p { white-space:pre-wrap; overflow-wrap:anywhere; }.note-export table { width:100%; border-collapse:collapse; }.note-export td { border:1px solid var(--line); padding:8px; }.note-export img { max-width:100%; }.note-export-host { position:fixed; left:-10000px; top:0; }
@media(max-width:700px) { .memo-content { padding:0 12px 30px; }.memo-section { padding:16px; }.todo-main { flex-wrap:wrap; }.memo-bar { gap:8px; }.memo-bar input[type=datetime-local] { max-width:100%; }.note-export { width:500px; } }
/* reader.css */
.reader-fullscreen-open { overflow:hidden; }
#readerPanel.reader-fullscreen { position:fixed; inset:0; z-index:900; width:100%; height:100vh; height:100dvh; padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); background:var(--surface); display:flex; flex-direction:column; overflow:hidden; }
.reader-fullscreen .reader-toolbar,.reader-fullscreen .reader-controls { flex-shrink:0; margin-bottom:6px; padding:6px 10px; }
.reader-fullscreen .reader-layout { display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden; }
.reader-fullscreen .reader-directory,.reader-fullscreen .reader-hint { display:none; }
.reader-fullscreen .reader-main { display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden; }
.reader-fullscreen #readingViewport { flex:1 1 0; height:auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y pinch-zoom; -webkit-overflow-scrolling:touch; }
.reader-fullscreen .reader-pagination { flex-shrink:0; padding:8px 12px; }
.reader-fullscreen #readerFullscreen { min-height:44px; }
.pdf-text-layer { position:absolute; inset:0; overflow:hidden; line-height:1; text-align:initial; }.pdf-text-layer span { color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0 0; }.pdf-text-layer ::selection { background:#7a9aba66; }#pdfStage { position:relative; margin:20px auto; }#pdfStage #pdfCanvas { margin:0; }
.reader-content { max-width:1500px; margin:auto; padding:0 46px 45px; }.reader-books { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:22px; }.reader-book { border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; transition:transform .2s,box-shadow .2s; }.reader-book:hover { transform:translateY(-3px); box-shadow:0 9px 25px #00000014; }.reader-book-open { display:block; width:100%; padding:16px; text-align:left; }.reader-cover { height:245px; width:100%; object-fit:cover; border-radius:8px; }.reader-cover-art { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px; padding:25px; background:linear-gradient(145deg,var(--surface-2),var(--accent-soft)); color:var(--accent); text-align:center; font-family:var(--heading-font); }.reader-cover-art strong { font-size:23px; line-height:1.6; overflow-wrap:anywhere; }.reader-cover-art span { font-size:11px; letter-spacing:4px; }.reader-book h3 { font-family:var(--heading-font); overflow-wrap:anywhere; }.reader-book p { margin:7px 0; font-size:12px; color:var(--muted); }.reader-book-actions { display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 16px; }.reader-book-actions select { max-width:100%; border:1px solid var(--line); padding:6px; border-radius:8px; background:var(--bg); }.reader-meter { height:3px; background:var(--line); margin:10px 0; }.reader-meter span { height:100%; display:block; background:var(--accent); }
.reader-toolbar,.reader-controls { padding:14px 18px; background:var(--surface); border:1px solid var(--line); border-radius:8px; margin-bottom:12px; }.reader-toolbar strong { flex:1; }.reader-controls label { display:flex; align-items:center; gap:6px; font-size:12px; }.reader-controls input { width:100px; }.reader-controls select { padding:6px; border:1px solid var(--line); background:var(--bg); border-radius:8px; max-width:180px; }.reader-layout { display:grid; grid-template-columns:220px minmax(0,1fr); border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }.reader-directory { padding:20px 14px; border-right:1px solid var(--line); max-height:82vh; overflow:auto; }.reader-directory h3 { font-size:13px; margin:0 8px 15px; }.reader-directory button { display:block; padding:11px 10px; width:100%; text-align:left; font-size:13px; border-radius:8px; overflow-wrap:anywhere; }.reader-directory button.active { background:var(--accent-soft); color:var(--accent); }.reader-main { min-width:0; background:var(--reader-paper,var(--surface)); color:var(--text); }.reader-main[data-paper=cream] { --reader-paper:#f7f1e6; }.reader-main[data-paper=sage] { --reader-paper:#ecf1e8; }.reader-main[data-paper=gray] { --reader-paper:#eeeeeb; }body[data-mode=night] .reader-main[data-paper] { --reader-paper:var(--surface); }
#readingViewport { height:68vh; min-height:350px; overflow:auto; scroll-behavior:auto; position:relative; }#readingPage { max-width:820px; margin:auto; padding:48px 60px 65px; font-family:var(--reader-font,var(--body-font)); font-size:var(--reader-size,19px); line-height:var(--reader-line,1.95); overflow-wrap:anywhere; }.reader-pagination { display:flex; align-items:center; justify-content:space-between; padding:17px 25px; border-top:1px solid var(--line); }.reader-hint { padding:0 25px; font-size:11px; }.reading-chap { text-align:center; font-family:var(--heading-font); font-weight:500; font-size:1.8em; margin:20px 0 18px; line-height:1.55; letter-spacing:.08em; }.reading-chap::after { content:''; display:block; width:50px; height:1px; background:var(--accent); margin:24px auto; }.reading-title { text-align:center; font-family:var(--heading-font); font-size:1.18em; color:var(--accent); letter-spacing:.14em; font-weight:400; margin:0 0 28px; }.reading-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:20px 0; }.reading-chip { border-radius:30px; background:var(--accent-soft); color:var(--accent); font-size:.65em; padding:4px 13px; letter-spacing:.03em; }.reading-cp .reading-chip { border:1px solid var(--line); background:var(--surface-2); }.reading-location { text-align:center; color:var(--muted); font-size:.75em; margin:18px 0 28px; }.reading-preface { border-left:3px solid var(--accent); padding:15px 24px; margin:30px 0 38px; background:color-mix(in srgb,var(--accent-soft) 40%,transparent); font-style:italic; font-size:.9em; color:var(--muted); line-height:1.9; }.reading-paragraph { text-indent:2em; margin:0 0 1.25em; white-space:pre-wrap; }.reading-inner { font-style:italic; color:var(--muted); }.reading-comment { font-size:.83em; border-left:2px solid var(--line); padding:12px 20px; margin:25px 0; color:var(--muted); background:var(--surface-2); }.reading-divider { border:0; border-top:1px solid var(--line); margin:40px auto; width:60%; }.reading-image { max-width:100%; display:block; margin:25px auto; border-radius:8px; }.reader-page-mode #readingViewport { overflow-x:hidden; }.reader-page-mode #readingPage { max-width:none; height:100%; margin:0; padding:35px; column-gap:70px; column-fill:auto; }.reader-page-mode .reading-chap { break-after:avoid; }.reader-page-mode .reading-preface,.reader-page-mode .reading-image { break-inside:avoid; }#pdfCanvas { display:block; max-width:100%; height:auto; margin:20px auto; }#pdfFallback { padding:25px; }#pdfFallback iframe { width:100%; height:55vh; border:0; }.reader-book-open:focus-visible { outline:2px solid var(--accent); }
@media(max-width:800px) { .reader-content { padding:0 12px 30px; }.reader-layout { grid-template-columns:150px minmax(0,1fr); }#readingPage { padding:25px; }.reader-toolbar,.reader-controls { padding:12px; } }
@media(max-width:550px) { .reader-layout { display:block; }.reader-directory { max-height:150px; border-right:0; border-bottom:1px solid var(--line); }.reader-directory h3 { margin-bottom:7px; }#readerToc { display:flex; gap:5px; flex-wrap:wrap; }#readerToc button { width:auto; max-width:100%; padding:7px; }#readingViewport { height:65vh; }.reader-books { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); }.reader-cover { height:205px; }.reader-cover-art strong { font-size:19px; } }
/* repairs.css */
/* Every panel derives its color from the selected background. */
:root { --panel-bg:var(--bg); --panel-secondary:color-mix(in srgb,var(--bg) 92%,var(--text)); }
.hex-color { width:90px !important; flex:0 0 90px !important; font-family:monospace; }
.custom-colors { flex-wrap:wrap; }.custom-colors label { flex-wrap:wrap; }
.memo-content input[type=color] { flex:0 0 40px; width:40px; height:34px; padding:3px; }
.reader-controls input[type=color] { width:40px; }
.image-width-controls { padding:12px 0; }.image-width-controls input { width:100%; }
[hidden] { display:none !important; }
.reading-settings-drawer { position:fixed; inset:0 0 0 auto; margin:0; width:min(400px,94vw); max-width:94vw; height:100%; height:100dvh; max-height:100%; border:0; border-left:1px solid var(--line); padding:0; background:var(--surface); color:var(--text); box-shadow:-8px 0 30px #0002; overflow:auto; font-family:var(--body-font); }
.reading-settings-drawer::backdrop { background:#0005; }
.reading-settings-drawer .drawer-header { position:sticky; top:0; background:var(--surface); z-index:1; padding:20px; }
.reading-settings-drawer .reader-controls { display:flex; flex-direction:column; align-items:stretch; gap:22px; margin:0; padding:24px; border:0; box-shadow:none; }
.reading-settings-drawer .reader-controls label { flex-wrap:wrap; justify-content:space-between; font-size:14px; gap:10px; }
.reading-settings-drawer input[type=range] { flex:1; min-width:120px; accent-color:var(--accent); height:32px; touch-action:pan-y; }
.reading-settings-drawer select { max-width:240px; min-height:40px; }
.reading-settings-drawer button { min-height:40px; }
.reading-chat { display:flex; flex-direction:column; align-items:flex-start; margin:20px 0; break-inside:avoid; text-indent:0; line-height:1.65; }
.reading-chat-right { align-items:flex-end; }
.reading-chat-name { font-size:.68em; color:var(--muted); margin:0 8px 6px; max-width:88%; overflow-wrap:anywhere; }
.reading-chat-bubble { max-width:86%; margin:0; padding:12px 16px; border-radius:4px 16px 16px 16px; background:color-mix(in srgb,#fff 88%,var(--bg)); color:#303630; box-shadow:0 2px 7px #0000000d; white-space:pre-wrap; overflow-wrap:anywhere; text-indent:0; }
.reading-chat-right .reading-chat-bubble { background:#c5e9b1; border-radius:16px 4px 16px 16px; }
body[data-mode=night] .reading-chat-bubble { background:#414641; color:#e8ede6; }body[data-mode=night] .reading-chat-right .reading-chat-bubble { background:#425c3a; }
@media(max-width:600px) { .reading-chat-bubble { max-width:92%; padding:10px 13px; }.reader-toolbar { gap:8px; }.reader-toolbar strong { flex-basis:60%; } }
.sidebar,.editor-panel,.writing-layout,.topbar { background:var(--surface); }
.reader-main[data-paper=cream] { --reader-paper:color-mix(in srgb,var(--bg) 94%,#d9bf93); }
.reader-main[data-paper=sage] { --reader-paper:color-mix(in srgb,var(--bg) 94%,#91ae8d); }
.reader-main[data-paper=gray] { --reader-paper:color-mix(in srgb,var(--bg) 94%,#939393); }
.chapter-dialog { width:min(850px,95vw); max-height:90vh; overflow:auto; padding:25px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); font-family:var(--body-font); }
.chapter-dialog::backdrop { background:#0005; }.chapter-dialog textarea { width:100%; min-height:100px; background:var(--bg); color:var(--text); border:1px solid var(--line); padding:10px; }.chapter-preview { max-height:260px; overflow:auto; padding:15px 30px; }.chapter-preview input { width:100%; padding:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); margin:4px; }.auto-record-controls { margin:15px 0; }.auto-record-hint { font-size:12px; color:var(--muted); }
/* workbench-tools.css */
.tools-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }.tools-bar button,.tools-dialog button { min-height:40px; }
.workspace-search .tools-bar { position:sticky; top:-22px; z-index:1; padding:12px 0; background:var(--surface); }
.workspace-search .tools-bar input[type=search] { flex-basis:100%; min-height:44px; }
.workspace-search .tools-bar select { flex:1; min-width:0; min-height:40px; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
.search-history { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:8px 0 16px; font-size:12px; color:var(--muted); }
.search-history-term { border:1px solid var(--line); border-radius:20px; padding:8px 12px; max-width:100%; overflow-wrap:anywhere; }
.workspace-search .search-result { background:var(--bg); }
.workspace-search .search-result:hover,.workspace-search .search-result.selected { border-color:var(--accent); background:var(--accent-soft); }
.workspace-search .search-result:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.workspace-search .search-result p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; line-height:1.8; }
.search-hint { font-size:12px; color:var(--muted); padding-top:12px; border-top:1px solid var(--line); }
@media(max-width:620px) { .workspace-search .tools-bar { top:-16px; } .workspace-search .tools-bar select { flex-basis:100%; } .search-history button { min-height:44px; } }
/* Writing workspace: quiet paper surface, persistent reference column. */
#writeModule .writing-layout { grid-template-columns:210px minmax(0,1fr) 310px; border-radius:14px; }
#writeModule .editor-panel { min-width:0; }
#writeModule .editor-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:16px 24px; background:transparent; }
#writeModule .editor-toolbar>div:first-child { flex:1; min-width:120px; overflow-wrap:anywhere; }
#writeModule .title-input { padding:24px 40px 12px; font-size:26px; }
#writeModule .editor { padding:16px 40px 40px; line-height:1.95; }
#writeModule .volume-editor { padding:16px 40px 0; }
#writeModule .left-sidebar { padding:22px 14px; }
#writeModule .tree-row { align-items:flex-start; }
#writeModule .tree-name { line-height:1.6; }
#writeModule .chapter-item.active { box-shadow:inset 3px 0 var(--accent); border-left:0; }
#writeModule .chapter-item .tree-action { opacity:.65; }
#writeModule .chapter-item:hover .tree-action,#writeModule .chapter-item:focus-within .tree-action { opacity:1; }
.writing-more { position:relative; font-size:12px; }
.writing-more summary { cursor:pointer; padding:10px; color:var(--muted); }
.writing-more-actions { position:absolute; right:0; top:100%; z-index:20; min-width:180px; display:grid; gap:6px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); }
.writing-more-actions button { text-align:left; min-height:40px; }
#resourceWorkspace { min-width:0; padding:20px 16px; display:flex; flex-direction:column; gap:16px; }
.resource-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:600; }
.resource-nav { padding-bottom:14px; border-bottom:1px solid var(--line); gap:4px; }
.resource-nav button { flex:1; padding:7px 5px; font-size:12px; }
.resource-content { min-width:0; }
.resource-filters { display:flex; flex-wrap:wrap; gap:8px; }
.resource-filters input { width:100%; }
.resource-filters select { flex:1; }
.resource-filters input,.resource-filters select,.resource-form input,.resource-form select,.resource-form textarea { min-width:0; max-width:100%; border:1px solid var(--line); border-radius:8px; background:var(--bg); padding:10px; }
.resource-section { margin-top:22px; }
.resource-section h3 { font-size:12px; font-weight:500; color:var(--muted); margin:0 0 10px; }
.resource-row { display:grid; gap:6px; text-align:left; width:100%; padding:12px; margin:8px 0; border:1px solid transparent; border-radius:10px; background:var(--surface); overflow-wrap:anywhere; }
.resource-row:hover,.resource-row:focus-visible { border-color:var(--accent); background:var(--accent-soft); }
.resource-row small { color:var(--accent); font-size:11px; }
.resource-row strong { font-size:14px; font-weight:500; }
.resource-row span,.resource-empty { font-size:12px; line-height:1.8; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.resource-row span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.resource-missing,.resource-backlink { display:block; width:100%; text-align:left; padding:10px 0; color:var(--accent); font-size:12px; overflow-wrap:anywhere; }
.resource-form { display:grid; gap:14px; margin-top:18px; }
.resource-form label { display:grid; gap:7px; font-size:12px; color:var(--muted); }
.resource-form textarea { min-height:260px; resize:vertical; color:var(--text); line-height:1.8; }
.resource-drawer { inset:0 0 0 auto; margin:0; width:min(410px,94vw); max-width:100vw; height:100dvh; max-height:100dvh; padding:0; border:0; border-left:1px solid var(--line); background:var(--surface); color:var(--text); overflow:auto; overscroll-behavior:contain; }
.resource-drawer::backdrop { background:#0005; }
.resource-drawer #resourceWorkspace { display:flex; border:0; min-height:100%; padding-bottom:max(24px,env(safe-area-inset-bottom)); }
#resourceWorkspace button,#resourceWorkspace select { min-height:40px; }
#resourceWorkspace :focus-visible,.writing-more :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(min-width:1101px) { #resourceWorkspace { max-height:calc(100vh - 32px); position:sticky; top:16px; align-self:start; overflow:auto; scrollbar-width:thin; } }
@media(max-width:1100px) { #writeModule .writing-layout { grid-template-columns:190px minmax(0,1fr); margin-left:12px; margin-right:12px; } }
@media(max-width:620px) { #writeModule .writing-layout { display:block; border-radius:10px; } #writeModule .editor-toolbar { padding:12px 16px; } #writeModule .title-input { padding:22px 20px 10px; font-size:23px; } #writeModule .editor { padding:16px 20px 30px; } #writeModule .volume-editor { padding:14px 20px 0; } #writeModule .chapter-tree { max-height:230px; overflow:auto; margin-left:0; display:block; } #writeModule .left-sidebar { padding:16px; } .resource-drawer button { min-height:44px; } }
.tools-panel { border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:16px; margin:0 20px 18px; }
.tools-panel h3 { margin:0 0 12px; font-size:16px; }.pomodoro-display { font-size:30px; font-variant-numeric:tabular-nums; margin:8px 0; }.tools-panel label { font-size:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tools-panel input[type=number] { width:75px; }.tools-panel input,.tools-dialog input,.tools-dialog select,.tools-dialog textarea { background:var(--bg); border:1px solid var(--line); border-radius:5px; padding:8px; min-width:0; }
.tools-panel details { margin-top:12px; }.tools-panel summary { cursor:pointer; }.tools-panel details .tools-bar { margin-top:10px; }.tools-summary { color:var(--muted); font-size:12px; line-height:1.8; }
.tools-dialog { width:min(940px,94vw); max-width:94vw; max-height:90vh; padding:22px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); overflow:auto; }.tools-dialog::backdrop { background:#0005; }.tools-dialog header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }.tools-dialog h2 { font-size:20px; margin:0; }
.tools-dialog form { display:grid; gap:12px; }.tools-dialog form label { display:grid; gap:6px; font-size:13px; }.tools-dialog textarea { width:100%; min-height:150px; resize:vertical; }.tools-dialog .tools-bar { margin:12px 0; }.tools-dialog .tools-bar input[type=search] { flex:1; min-width:150px; }
.search-result { width:100%; text-align:left; border:1px solid var(--line); border-radius:8px; padding:14px; display:grid; gap:8px; margin:10px 0; overflow-wrap:anywhere; }.search-result small { color:var(--muted); }.search-result p { margin:0; white-space:pre-wrap; }.tools-dialog mark,.wiki-preview mark { background:var(--accent-soft); color:var(--text); border-radius:3px; }
.wiki-preview { border-top:1px solid var(--line); padding:16px 24px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; max-height:260px; overflow:auto; }.wiki-link { padding:0 3px; border-bottom:1px dashed var(--accent); color:var(--accent); }.wiki-suggestions { display:flex; flex-wrap:wrap; gap:6px; padding:10px 24px; background:var(--surface-2); }.wiki-suggestions button { padding:8px; }.wiki-links { display:flex; flex-wrap:wrap; gap:8px; padding:12px 24px; }
.resource-list { display:grid; gap:8px; margin:14px 0; }.resource-list button { text-align:left; border:1px solid var(--line); border-radius:6px; padding:12px; }.relation-canvas { width:100%; height:420px; border:1px solid var(--line); border-radius:8px; background:var(--bg); touch-action:none; }.relation-canvas text { fill:var(--text); font-size:14px; pointer-events:none; }.relation-canvas .relation-node { cursor:grab; }.relation-canvas circle { fill:var(--accent-soft); stroke:var(--accent); stroke-width:2; }.relation-canvas line { stroke:var(--muted); stroke-width:1.5; }.relation-canvas .edge-label { font-size:12px; paint-order:stroke; stroke:var(--bg); stroke-width:5; }
.timeline-event { border-left:3px solid var(--accent); padding:12px 16px; margin:14px 0; background:var(--surface-2); overflow-wrap:anywhere; }.timeline-event h3 { margin:6px 0; }.timeline-event p { white-space:pre-wrap; }.timeline-event small { color:var(--muted); }
.tools-alert { position:fixed; bottom:25px; right:20px; max-width:min(400px,90vw); z-index:1000; padding:20px; border:1px solid var(--accent); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }.tools-alert p { margin:0 0 12px; }.tools-status { min-height:22px; font-size:12px; color:var(--muted); }
.project-workbench { overflow:hidden; }.project-workbench-heading { display:flex; justify-content:space-between; gap:18px; align-items:end; }.project-picker { display:grid; gap:6px; color:var(--muted); font-size:12px; min-width:min(280px,100%); }.project-picker select,.task-toolbar select { border:1px solid var(--line); border-radius:7px; background:var(--bg); padding:9px; }.project-tabs { display:flex; gap:18px; margin:18px 0 0; border-bottom:1px solid var(--line); }.project-tab { padding:10px 2px; border-bottom:2px solid transparent; color:var(--muted); }.project-tab.active { color:var(--text); border-color:var(--accent); }.project-panel { padding-top:20px; }.project-brief-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.project-field { display:grid; gap:7px; color:var(--muted); font-size:12px; min-width:0; }.project-field input,.project-field textarea,.task-form select { width:100%; border:1px solid var(--line); border-radius:7px; background:var(--bg); padding:10px; color:var(--text); }.project-field textarea { resize:vertical; min-height:90px; line-height:1.7; }.project-field:nth-child(2),.project-field:nth-child(7),.project-form-actions { grid-column:1 / -1; }.project-form-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.task-toolbar { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }.task-toolbar select { min-width:140px; }.task-list { display:grid; gap:10px; margin-top:18px; }.task-card { border:1px solid var(--line); border-left:4px solid var(--muted); border-radius:8px; padding:15px; background:var(--surface); }.task-doing { border-left-color:var(--accent); }.task-review { border-left-color:#a98457; }.task-done { border-left-color:#71916f; opacity:.78; }.task-card-heading { display:flex; justify-content:space-between; gap:12px; align-items:start; }.task-card h3 { margin:0; overflow-wrap:anywhere; }.task-status { white-space:nowrap; font-size:12px; color:var(--accent); }.task-card p { white-space:pre-wrap; overflow-wrap:anywhere; }.task-card .tools-bar { margin-top:12px; }.task-form-slot { margin-top:16px; }.task-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); }.task-form .project-field:nth-child(1),.task-form .project-field:last-of-type,.task-form .project-form-actions { grid-column:1 / -1; }
@media(max-width:620px){.project-workbench-heading{display:block}.project-picker{margin-top:14px;min-width:0}.project-brief-form,.task-form{grid-template-columns:1fr}.project-field:nth-child(2),.project-field:nth-child(7),.project-form-actions,.task-form .project-field:nth-child(1),.task-form .project-field:last-of-type,.task-form .project-form-actions{grid-column:auto}.task-toolbar select{flex:1;min-width:0}.task-card-heading{display:block}.task-status{display:inline-block;margin-top:7px}}
@media(max-width:900px) { .top-actions { flex-wrap:wrap; justify-content:flex-end; }.top-actions #globalSearchButton { min-height:40px; }.tools-panel { margin:0 12px 16px; }.tools-dialog { padding:16px; }.editor-toolbar { flex-wrap:wrap; gap:10px; }.toolbar-actions { flex-wrap:wrap; }.relation-canvas { height:350px; }.tools-dialog .tools-bar>* { max-width:100%; }.tools-bar select { flex:1; } }
@media(max-width:620px) { .top-actions #globalSearchButton { width:40px; min-width:40px; padding:0; font-size:0; border:1px solid var(--line); border-radius:6px; }.top-actions #globalSearchButton::before { content:"⌕"; font-size:22px; line-height:1; }.poem-switch { max-width:150px; overflow:hidden; }.wiki-preview { padding:12px 16px; }.wiki-suggestions,.wiki-links { padding-left:16px; padding-right:16px; } }
/* theme-base.css */
/*
  Skin authoring base. Import after the application CSS to override only tokens.
  A shareable JSON skin maps colors to --bg, --text and --accent; this file is
  the complete stable token surface for hand-authored CSS skins.
*/
:root {
  --skin-bg: var(--bg);
  --skin-surface: var(--surface);
  --skin-surface-muted: var(--surface-2);
  --skin-text: var(--text);
  --skin-muted: var(--muted);
  --skin-line: var(--line);
  --skin-accent: var(--accent);
  --skin-accent-soft: var(--accent-soft);
  --skin-shadow: var(--shadow);
  --skin-radius-sm: 6px;
  --skin-radius-md: 8px;
  --skin-radius-lg: 12px;
  --skin-bubble-bg: var(--bubble-bg, var(--surface-2));
  --skin-bubble-radius: var(--bubble-radius, 14px);
  --skin-highlight: #e9dba2;
  --skin-selection: color-mix(in srgb, var(--accent) 28%, transparent);
}

::selection { background: var(--skin-selection); color: var(--skin-text); }
body { background-color:var(--skin-bg); color:var(--skin-text); }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[contenteditable="true"]:focus-visible { outline:2px solid var(--skin-accent); outline-offset:2px; }
/* The writing canvas stays borderless while typing. */
#editor:focus,#editor:focus-visible,
#chapterTitle:focus,#chapterTitle:focus-visible,
#volumeTitle:focus,#volumeTitle:focus-visible { outline:none; outline-offset:0; }
/* life.css */
.life-page { max-width:1100px; margin:24px auto; padding:0 20px calc(50px + env(safe-area-inset-bottom)); }
.life-tabs,.life-actions { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:14px 0; }
.life-card { border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:20px; margin:14px 0; }
.life-page form.life-card { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.life-page form.life-card textarea { grid-column:1 / -1; width:100%; min-height:200px; resize:vertical; }
.life-page form.life-card > * { min-width:0; }
.life-page form.life-card > button[type=submit] { grid-column:1 / -1; min-height:44px; }
.life-page form.life-card .life-actions { margin:0; }
.capsule-editor > button[type=submit] { justify-self: start; min-width: 150px; }
.diary-page-controls button { min-height:44px; font-size:24px; }
.life-page { padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); }
@media(max-width:900px){.topbar{padding-top:max(10px,env(safe-area-inset-top));padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}}
@media(max-width:620px){.life-page form.life-card{grid-template-columns:minmax(0,1fr)}.life-page .life-actions{min-width:0}.life-page .life-actions > .diary-page-controls{width:100%}}
.life-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.life-page input:not([type=file]),.life-page select,.life-page textarea,.skin-settings textarea { max-width:100%; padding:8px; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:6px; }
.life-page label { display:grid; gap:7px; margin:10px 0; }
.life-page progress { width:100%; accent-color:var(--accent); }
.star-balance { font-size:30px; color:var(--accent); }
.rich-editor { min-height:150px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
.rich-editor:focus { outline:2px solid var(--accent-soft); }
.rich-editor img { max-width:100%; height:auto; border-radius:8px; display:block; margin:12px auto; }
.rich-editor mark,.life-highlight { background:#e9dba2; color:#34322b; }
.selection-tools { position:fixed; z-index:10000; display:flex; gap:3px; flex-wrap:wrap; max-width:calc(100vw - 16px); padding:6px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); }
.selection-tools[hidden] { display:none; }
.selection-tools button { min-height:44px; touch-action:manipulation; }
#readingPage,#readingPage *,#pdfTextLayer,#pdfTextLayer span,.rich-editor { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
@media(max-width:620px) {
  .selection-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); left:max(8px,env(safe-area-inset-left)) !important; right:max(8px,env(safe-area-inset-right)); top:auto !important; bottom:0; width:auto; max-width:none; box-sizing:border-box; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); border-radius:14px 14px 0 0; }
  body .selection-tools button { display:block; width:100%; min-width:0; height:44px !important; min-height:44px !important; padding:8px 2px; font-size:12px; white-space:nowrap; }
  .has-selection-tools #readingViewport { scroll-padding-bottom:120px; }
  .reader-toolbar,.reader-controls { flex-wrap:wrap; }
}
.selection-tools button { padding:7px 9px; border-radius:5px; color:var(--text); }
.selection-tools button:hover { background:var(--accent-soft); }
.life-bars { display:flex; align-items:end; gap:8px; height:130px; padding-top:16px; }
.life-bar { flex:1; text-align:center; min-width:0; font-size:12px; }
.life-bar i { display:block; background:var(--accent); border-radius:5px 5px 0 0; min-height:2px; margin:4px auto; width:65%; }
.life-record { padding:12px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.skin-settings textarea { width:100%; min-height:75px; }
.reading-chat-bubble { border-radius:var(--bubble-radius,14px) !important; background:var(--bubble-bg,var(--surface-2)) !important; }
.excerpt-preview { padding:36px; background:#f5f0e6; color:#403c35; max-width:600px; line-height:2; font-size:20px; white-space:pre-wrap; overflow-wrap:anywhere; }
.diary-book { position:relative; min-height:520px; max-width:760px; margin:20px auto 0; padding:30px clamp(20px,6vw,58px); background:var(--surface); border:1px solid var(--line); border-radius:var(--skin-radius-lg); box-shadow:var(--shadow); }
.diary-book > * { position:relative; }
.diary-book .rich-editor { min-height:245px; background:transparent; border:0; border-radius:0; padding:12px 0; }
.diary-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.diary-meta label { margin:0; }
.diary-page-controls { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:10px; align-items:center; max-width:760px; margin:0 auto 14px; }
.diary-page-controls input { width:100%; text-align:center; }
@media(max-width:620px){.main-nav .nav-item{font-size:12px;padding:7px 3px}.life-card{padding:14px}.life-page{padding:0 12px calc(30px + env(safe-area-inset-bottom))}.diary-book{min-height:calc(100svh - 240px);padding:22px 18px}.diary-meta{grid-template-columns:1fr}.diary-book .rich-editor{min-height:260px}.life-page input,.life-page select,.life-page textarea{font-size:16px}.selection-tools{left:8px!important;right:8px;bottom:max(8px,env(safe-area-inset-bottom));top:auto!important;justify-content:center}.selection-tools button{min-height:40px}.excerpt-preview{padding:24px;font-size:18px}}
@media(max-width:390px){.life-tabs{gap:5px}.life-tabs button{padding:7px 8px}.diary-page-controls{gap:6px}.diary-book{padding:18px 14px}}
/* ui-refinement.css */
.task-card-actions{align-items:flex-start;}
.compact-actions{position:relative;display:inline-block;}
.compact-actions summary{cursor:pointer;list-style:none;border:1px solid var(--line);padding:.45rem .7rem;color:var(--muted);background:var(--surface);}
.compact-actions summary::-webkit-details-marker{display:none;}
.compact-actions>button{margin-top:.35rem;}
.book-actions .compact-actions>button{display:block;width:100%;}
.reader-controls .compact-actions{align-self:center;}
.task-more{position:relative;}
.task-more summary,.writing-more summary{cursor:pointer;list-style:none;border:1px solid var(--line);padding:.45rem .7rem;color:var(--text);background:var(--surface);}
.task-more summary::-webkit-details-marker,.writing-more summary::-webkit-details-marker{display:none;}
.task-more-actions{position:absolute;right:0;top:calc(100% + .35rem);z-index:5;display:flex;flex-direction:column;gap:.25rem;min-width:7rem;padding:.35rem;background:var(--surface);border:1px solid var(--line);}
.task-more-actions button{width:100%;text-align:left;}
@media (max-width:600px){.task-card-actions{flex-wrap:wrap;}.task-more-actions{right:auto;left:0;}}
.record-history{margin-top:12px;border:1px solid var(--ui-hairline);background:var(--surface);}
.record-history summary{cursor:pointer;list-style:none;padding:10px 12px;color:var(--muted);font-size:13px;font-weight:600;}
.record-history summary::-webkit-details-marker{display:none;}
.record-history summary::before{content:'›';display:inline-block;margin-right:7px;transition:transform .2s ease;}
.record-history[open] summary::before{transform:rotate(90deg);}
.record-history .records-table{margin:0;border-top:1px solid var(--ui-hairline);}
/* Final visual layer: a compact, paper-like writing environment. */
:root {
  --ui-canvas: color-mix(in srgb, var(--bg) 96%, var(--text));
  --ui-raised: color-mix(in srgb, var(--surface) 94%, var(--bg));
  --ui-subtle: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
  --ui-hairline: color-mix(in srgb, var(--line) 78%, transparent);
  --ui-control-height: 38px;
  --ui-radius: 6px;
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  --ui-motion: .24s;
}

html { background: var(--ui-canvas); }
body { background: var(--ui-canvas); font-size: 14px; line-height: 1.55; }
button, input, select, textarea { transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease; }
button { border-radius: var(--ui-radius); }
button:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-soft) 64%, transparent); }
input, select, textarea { border-radius: var(--ui-radius) !important; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 58px;
  padding: 0 clamp(18px, 3vw, 48px);
  border-bottom: 1px solid var(--ui-hairline);
  box-shadow: none;
}
.brand { gap: 9px; font-family: var(--heading-font); font-size: 15px; }
.brand-mark { width: 26px; height: 26px; border: 1px solid var(--accent); border-radius: 50%; display: grid; place-items: center; color: var(--accent); font-size: 13px; }
.main-nav { align-self: stretch; gap: 2px; }
.nav-item { position: relative; min-height: 58px; padding: 0 13px; color: var(--muted); font-size: 13px; }
.nav-item::after { content: ""; position: absolute; right: 13px; bottom: 0; left: 13px; height: 2px; background: transparent; }
.nav-item.active { color: var(--text); font-weight: 600; }
.nav-item.active::after { background: var(--accent); }
.top-actions { gap: 8px; }
.poem-switch { color: var(--muted); font-size: 12px; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--ui-hairline); font-size: 16px; }

.workspace-heading { max-width: 1440px; margin: 0 auto; padding: 42px clamp(20px, 4vw, 52px) 25px; }
.workspace-heading h1 { margin: 3px 0 0; font-size: clamp(25px, 3vw, 34px); line-height: 1.15; letter-spacing: 0; }
.eyebrow { margin: 0; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.save-state { border: 1px solid var(--ui-hairline); border-radius: 20px; padding: 5px 10px; font-size: 12px; }

.primary-button { min-height: var(--ui-control-height); padding: 8px 13px; border-radius: var(--ui-radius); box-shadow: none; font-size: 13px; }
.outline-button, .remove-button, .small-button { min-height: 34px; padding: 6px 10px; border-color: var(--ui-hairline); border-radius: var(--ui-radius); }
.outline-button:hover, .remove-button:hover { background: var(--ui-subtle); }

.writing-layout { max-width: 1440px; min-height: calc(100vh - 190px); margin: 0 auto 34px; border: 1px solid var(--ui-hairline); border-radius: 8px; box-shadow: none; overflow: hidden; }
.sidebar { background: var(--ui-raised); }
.left-sidebar, #resourceWorkspace { padding-top: 19px; }
.panel-heading { padding-bottom: 12px; border-bottom: 1px solid var(--ui-hairline); }
.panel-heading h2, .resource-heading { font-size: 13px; letter-spacing: .04em; }
.book-picker { margin-top: 16px; }
.book-picker select, .book-actions .outline-button { background: transparent; }
.chapter-tree { margin-top: 15px; }
.chapter-item { border-radius: 4px; }
.chapter-item.active { background: var(--accent-soft); color: var(--text); }
.editor-panel { background: var(--surface); }
.editor-toolbar { min-height: 55px; border-bottom: 1px solid var(--ui-hairline); }
.title-input { font-family: var(--heading-font); font-weight: 600; letter-spacing: 0; }
.editor { max-width: 900px; margin: 0 auto; font-size: 17px; line-height: 2; }
.right-sidebar { border-left-color: var(--ui-hairline); }
.resource-nav { border-bottom-color: var(--ui-hairline); }

.works-content, .memo-content, .reader-content { max-width: 1440px; padding-right: clamp(20px, 4vw, 52px); padding-left: clamp(20px, 4vw, 52px); }
.works-section, .memo-section { margin-bottom: 24px; padding: 24px; border: 1px solid var(--ui-hairline); border-radius: 8px; background: var(--ui-raised); box-shadow: none; }
.works-section h2, .memo-heading h2 { font-size: 18px; letter-spacing: 0; }
.works-grid, .reader-books { gap: 16px; }
.work-card, .reader-book, .note-card { border-color: var(--ui-hairline); border-radius: 7px; box-shadow: none; }
.work-card:hover, .reader-book:hover, .note-card:hover { box-shadow: none; transform: none; }
.stat-card, .memo-summary span { border: 1px solid var(--ui-hairline); border-radius: 6px; background: var(--ui-subtle); }

.project-workbench { background: var(--ui-raised); }
.project-workbench-heading { align-items: center; }
.project-picker select, .task-toolbar select, .project-field input, .project-field textarea, .task-form select { min-height: var(--ui-control-height); background: var(--surface); border-color: var(--ui-hairline); }
.project-tabs { gap: 22px; margin-top: 22px; }
.project-tab { padding: 10px 1px; font-size: 13px; }
.project-tab.active { font-weight: 600; }
.project-brief-form { gap: 16px; }
.project-field { gap: 6px; }
.task-toolbar { padding-bottom: 16px; border-bottom: 1px solid var(--ui-hairline); }
.task-list { gap: 8px; }
.task-card { border-color: var(--ui-hairline); border-radius: 6px; background: var(--surface); box-shadow: none; }
.task-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.task-status { padding: 2px 7px; border: 1px solid var(--ui-hairline); border-radius: 12px; color: var(--accent); font-size: 11px; }

.memo-content input:not([type=checkbox]):not([type=range]), .memo-content textarea, .memo-content select, .life-page input:not([type=file]), .life-page select, .life-page textarea { background: var(--surface); border-color: var(--ui-hairline); }
.memo-section { padding: 22px; }
.todo-row { border-bottom-color: var(--ui-hairline); }
.note-card { padding: 20px; }
.notes-rail-heading, .notes-rail-nav { display: flex; align-items: center; gap: 8px; }
.notes-rail-heading { justify-content: space-between; margin: 0 4px 4px; }
.notes-rail-nav button { width: 34px; height: 34px; border: 1px solid var(--ui-hairline); font-size: 23px; }
.notes-rail-nav button:disabled { opacity: .3; cursor: default; }
#notesGrid {
  display: flex; gap: 18px; align-items: flex-start; overflow-x: auto;
  padding: 10px 4px 20px; scroll-snap-type: x proximity; scroll-padding-inline: 4px;
  overscroll-behavior-x: contain; scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
#notesGrid > .note-card { flex: 0 0 min(540px, 88%); min-width: 0; scroll-snap-align: start; }
#notesGrid:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.note-card:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.note-card .note-settings, .note-card .note-insert { margin-top: 10px; }
.note-card :is(.note-settings, .note-insert) > summary { width: fit-content; padding: 5px 0; color: var(--muted); font-size: 12px; }
.note-card :is(.note-settings, .note-insert)[open] > summary { color: var(--accent); }
.note-card .note-settings[open] { border-bottom: 1px solid var(--ui-hairline); padding-bottom: 12px; }
.note-card .rich-editor { min-height: 240px; margin-top: 12px; overflow-wrap: anywhere; }
.note-card > .muted { margin-bottom: 0; font-size: 11px; }
@media (hover: hover) and (pointer: fine) {
  #notesGrid > .note-card:hover {
    transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    box-shadow: 0 2px 4px color-mix(in srgb, var(--text) 3%, transparent), 0 7px 16px color-mix(in srgb, var(--text) 5%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  #notesGrid > .note-card:hover { transform: none; }
}
.note-block, .mind-viewport { border-color: var(--ui-hairline); border-radius: 6px; }
.life-card, .diary-book { border-color: var(--ui-hairline); border-radius: 8px; box-shadow: none; }

.reader-toolbar, .reader-controls, .reader-layout { border-color: var(--ui-hairline); border-radius: 8px; box-shadow: none; }
.reader-toolbar, .reader-controls { background: var(--ui-raised); }
.reader-layout { overflow: hidden; }
.reader-directory { background: var(--ui-raised); border-right-color: var(--ui-hairline); }
.reader-directory button.active { border-radius: 5px; }
#readingPage { max-width: 780px; }

.settings-drawer, .reading-settings-drawer { border-left-color: var(--ui-hairline); box-shadow: -14px 0 36px rgba(31, 31, 27, .09); }
.drawer-header { border-bottom: 1px solid var(--ui-hairline); }

/* Quiet feedback: colour changes remain separate from movement. */
html, body, body *, body *::before, body *::after {
  transition-property: background-color, color, border-color, box-shadow, opacity, transform;
  transition-duration: .5s, .5s, .5s, var(--ui-motion), var(--ui-motion), var(--ui-motion);
  transition-timing-function: ease, ease, ease, var(--ui-ease), var(--ui-ease), var(--ui-ease);
}
:is(button, a[href], [role=button], summary, .upload-button) {
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  :is(button, a[href], [role=button], summary, .upload-button):not(:disabled):not([aria-disabled=true]):hover {
    transform: none;
    box-shadow: none;
  }
  :is(.reader-book, .background-card, .resource-card):hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px color-mix(in srgb, var(--text) 3%, transparent), 0 7px 16px color-mix(in srgb, var(--text) 5%, transparent);
  }
  /* Let the card carry its main action, without two layers of movement. */
  :is(.work-open, .reader-book-open, .background-select):hover { transform: none; box-shadow: none; }
}
:is(button, a[href], [role=button], summary, .upload-button):not(:disabled):not([aria-disabled=true]):active {
  transform: translateY(0) scale(.98);
  box-shadow: none;
}
:is(.work-card, .reader-book, .background-card, .resource-card):has(:is(button, a[href]):active) {
  transform: translateY(0) scale(.995);
}
body :is(input, textarea, select, [contenteditable=true]):focus {
  border-color: var(--accent);
  outline-color: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
/* Writing stays still; a fine inset line is enough feedback. */
#editor:focus, #chapterTitle:focus { box-shadow: inset 2px 0 color-mix(in srgb, var(--accent) 35%, transparent); }
#volumeTitle:focus { box-shadow: none; border-bottom-color: var(--accent); }

.module.active, .project-panel:not([hidden]), .task-form-slot > form,
.writing-more[open] .writing-more-actions, .tools-alert {
  animation: ui-arrive .24s var(--ui-ease);
}
@keyframes ui-arrive {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.settings-drawer { z-index: 101; visibility: hidden; transition: transform .28s var(--ui-ease), visibility .28s, background-color .5s, color .5s, border-color .5s; }
.settings-drawer.open { visibility: visible; }
.drawer-backdrop, .drawer-backdrop.open {
  display: block; z-index: 100; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s ease, visibility .24s;
}
.drawer-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }

/* Native dialogs retain top-layer/focus semantics, including on close. */
dialog { opacity: 0; transform: translateY(8px) scale(.99); }
dialog[open] { opacity: 1; transform: translateY(0) scale(1); }
dialog:is(.resource-drawer, .reading-settings-drawer) { transform: translateX(100%); }
dialog:is(.resource-drawer, .reading-settings-drawer)[open] { transform: translateX(0); }
dialog::backdrop { opacity: 0; }
dialog[open]::backdrop { opacity: 1; }
@supports (transition-behavior: allow-discrete) {
  dialog {
    transition: opacity .24s ease, transform .28s var(--ui-ease), display .28s allow-discrete,
      overlay .28s allow-discrete, background-color .5s, color .5s, border-color .5s;
  }
  dialog::backdrop { transition: opacity .24s ease, display .28s allow-discrete, overlay .28s allow-discrete; }
  @starting-style {
    dialog[open] { opacity: 0; transform: translateY(8px) scale(.99); }
    dialog:is(.resource-drawer, .reading-settings-drawer)[open] { transform: translateX(100%); }
    dialog[open]::backdrop { opacity: 0; }
  }
}
@supports not (transition-behavior: allow-discrete) {
  dialog[open] { animation: ui-arrive .24s var(--ui-ease); }
}
.save-state { min-width: 96px; justify-content: center; font-variant-numeric: tabular-nums; }
.save-state[data-status=saving] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.save-state[data-status=saving] .status-dot { animation: ui-saving .8s ease-in-out infinite alternate; }
.save-state[data-status=saved] .status-dot { animation: ui-saved .3s ease-out; }
.save-state[data-status=error] { color: #ae665b; border-color: currentColor; }
.save-state[data-status=error] .status-dot { background: currentColor; }
@keyframes ui-saving { from { opacity: .35; } to { opacity: 1; } }
@keyframes ui-saved { from { opacity: .3; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
#toast {
  display: block; position: fixed; z-index: 2000; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  max-width: calc(100vw - 32px); width: max-content; white-space: normal; text-align: center;
  padding: 10px 18px; border: 1px solid var(--ui-hairline); border-radius: 8px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px);
  transition: opacity .24s ease, transform .24s var(--ui-ease), visibility .24s, background-color .5s, color .5s, border-color .5s;
}
#toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  html, body, body *, body *::before, body *::after { animation: none !important; transition-duration: .12s !important; }
  body :is(button, a[href], [role=button], summary, .upload-button, .work-card, .reader-book, .background-card, .resource-card) { transform: none !important; }
  dialog, dialog[open] { transform: none !important; }
  #toast, #toast.show { transform: translateX(-50%); }
  .settings-drawer { transition: opacity .12s ease, visibility .12s !important; opacity: 0; }
  .settings-drawer.open { opacity: 1; }
}

@media (max-width: 900px) {
  .topbar { position: relative; }
  .workspace-heading { padding-top: 30px; }
  .writing-layout { margin-right: 18px; margin-left: 18px; }
  #writeModule .writing-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .editor { font-size: 16px; }
}
@media (max-width: 620px) {
  .topbar { padding: 8px 12px 6px; }
  .nav-item { min-height: 42px; padding: 0 10px; }
  .nav-item::after { right: 10px; left: 10px; }
  .workspace-heading { padding: 25px 16px 18px; }
  .workspace-heading h1 { font-size: 25px; }
  .workspace-heading .primary-button { min-height: 36px; }
  .writing-layout { margin: 0 10px 20px; border-radius: 6px; }
  #writeModule .writing-layout { display: block; }
  .left-sidebar { border-bottom: 1px solid var(--ui-hairline); }
  #writeModule .editor-toolbar { padding: 12px 16px; }
  #writeModule .title-input { padding: 20px 22px 8px; font-size: 22px; }
  #writeModule .editor { padding: 13px 22px 30px; font-size: 16px; line-height: 1.92; }
  .works-content, .memo-content, .reader-content { padding-right: 12px; padding-left: 12px; }
  .works-section, .memo-section { padding: 16px; margin-bottom: 16px; border-radius: 6px; }
  .project-workbench-heading { align-items: stretch; }
  .project-tabs { gap: 16px; }
  .project-panel { padding-top: 16px; }
  .task-toolbar .primary-button { flex: 1 0 100%; }
}

/* Editorial trial. Theme-derived colours preserve custom skins and night mode. */
:root {
  --ui-canvas: var(--bg);
  --ui-raised: var(--surface);
  --ui-glass: color-mix(in srgb, var(--surface) 88%, transparent);
  --ui-radius: 8px;
  --ui-editorial-font: var(--heading-font), "Songti SC", "SimSun", serif;
}
.topbar {
  background: var(--surface);
  height: auto;
  min-height: 68px;
}
.brand { font-size: 16px; letter-spacing: .06em; }
.brand-mark { border-radius: 8px; width: 30px; height: 30px; }
.main-nav { gap: 6px; }
.nav-item { min-height: 68px; padding-inline: 16px; }
.nav-item.active { background: transparent; }
.workspace-heading { padding-top: 48px; padding-bottom: 30px; gap: 20px; }
.workspace-heading h1 {
  font-family: var(--ui-editorial-font);
  font-size: clamp(28px, 3.3vw, 42px);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 8px;
}
.eyebrow { letter-spacing: .18em; font-size: 10px; }
.works-section, .memo-section, .life-card {
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--text) 3%, transparent);
}
.works-section h2, .memo-heading h2, .life-card h2 {
  font-family: var(--ui-editorial-font);
  font-size: 22px;
  font-weight: 500;
}
.works-grid, .reader-books, .stats-grid { gap: 18px; }
.work-card, .reader-book, .note-card { border-radius: 12px; }
.stat-card { padding: 22px; border-radius: 12px; background: var(--ui-subtle); }
.stat-card strong { font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.writing-layout {
  max-width: 1336px;
  width: calc(100% - 64px);
  border-radius: 16px;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--text) 4%, transparent);
}
.sidebar { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.editor-panel { background: var(--surface); }
.editor-toolbar { background: var(--surface); }
.title-input { font-family: var(--ui-editorial-font); font-weight: 500; }
.panel-heading h2 { font-weight: 600; }
.chapter-item.active { border-radius: 6px; }
.record-history { border-radius: 10px; overflow: hidden; }
.record-history > summary { padding: 14px 16px; }
.record-history .record-scroll { max-width: 100%; overflow-x: auto; }
.task-more-actions, .writing-more-actions { border-radius: 10px; }
.settings-drawer, .reading-settings-drawer { background: var(--surface); }
@supports (backdrop-filter: blur(16px)) {
  .topbar, .settings-drawer, .reading-settings-drawer,
  .task-more-actions, .writing-more-actions {
    background: var(--ui-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}
@media (min-width: 1100px) {
  .works-content {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .works-content > .works-section { margin-bottom: 0; min-width: 0; }
  .works-content > .works-section:first-child,
  .works-content > .project-workbench { grid-column: 1 / -1; }
  .works-content .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .topbar { min-height: 62px; }
  .main-nav .nav-item { min-height: 44px; }
  .workspace-heading { padding-top: 30px; padding-bottom: 24px; }
  .writing-layout { width: auto; margin-inline: 18px; }
}
@media (max-width: 620px) {
  .topbar { padding-top: max(8px, env(safe-area-inset-top)); }
  .main-nav { gap: 2px; }
  .workspace-heading { gap: 12px; padding: 26px 16px 20px; }
  .workspace-heading h1 { font-size: 28px; }
  .writing-layout { margin-inline: 10px; border-radius: 12px; }
  .works-section, .memo-section, .life-card { padding: 16px; border-radius: 12px; }
  .works-section h2, .memo-heading h2 { font-size: 20px; }
  .stats-grid { gap: 8px; }
  .stat-card { padding: 12px; min-width: 0; overflow-wrap: anywhere; }
  .stat-card strong { font-size: 22px; }
}

/* The writing room: architectural layout, editorial cover, separate manuscript. */
:root {
  --desk-rail: 208px;
  --desk-ink: var(--text);
  --desk-dark: #263c33;
  --desk-light: #f4f1e9;
}
body { font-family: var(--body-font); }
.brand small { display: block; margin-top: 8px; font: 8px/1.5 Arial,sans-serif; letter-spacing: .16em; color: var(--muted); }
.heading-deck { margin: 14px 0 0; font-size: 12px; line-height: 1.8; color: var(--muted); }
.section-kicker { margin-bottom: 14px; font: 9px/1.5 Arial,sans-serif; letter-spacing: .16em; color: var(--muted); }
.workspace-heading { max-width: 1600px; padding: 48px 36px 32px; align-items: center; }
.workspace-heading h1 { font-size: clamp(28px,3.2vw,46px); letter-spacing: -.04em; }
.works-content,.memo-content,.reader-content { max-width: 1600px; padding-inline: 36px; }
.works-content { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,1fr); gap: 22px; align-items: start; padding-bottom: 48px; }
.works-content > .works-section { margin: 0; min-width: 0; padding: 28px; border-radius: 20px; }
.works-content > .collection-section { grid-column: 1; grid-row: 2; }
.works-content > .desk-stats { grid-column: 2; grid-row: 2; background: var(--ui-subtle); }
.works-content > .project-workbench { grid-column: 1 / -1; grid-row: 3; border-top: 3px solid var(--accent); }
.works-content > .desk-recycle { grid-column: 1 / -1; grid-row: 4; background: transparent; box-shadow: none; }
.works-section h2 { margin-bottom: 24px; font-size: 26px; }
.works-grid { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 18px; }
.work-card { background: var(--surface); border: 0; border-radius: 0; }
.collection-section { height: 620px; min-height: 620px; overflow: hidden; }
.collection-section .works-grid { height: calc(100% - 62px); overflow-y: auto; align-content: start; padding: 2px 4px 12px 0; }
.work-card { min-height: 492px; height: 492px; display: flex; flex-direction: column; overflow: hidden; }
.work-open { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.work-open h3, .work-open p { overflow-wrap: anywhere; }
.portfolio-title { cursor: text; }
.portfolio-title-input { width: 100%; margin: 16px 0 5px; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--accent); background: transparent; font: inherit; color: inherit; }
.work-open { padding: 0; }
.work-open img,.cover-placeholder { height: 220px; border-radius: 3px 12px 12px 3px; }
.cover-placeholder {
  background: linear-gradient(90deg,transparent 7px,var(--line) 8px,transparent 10px), var(--accent-soft);
  border: 1px solid var(--line); font-family: var(--heading-font); font-size: 22px;
  box-shadow: 4px 5px 0 color-mix(in srgb,var(--line) 55%,transparent);
}
.work-open strong { display: block; padding: 16px 0 5px; font-size: 17px; }
.work-actions { padding: 10px 0; border-top: 1px solid var(--ui-hairline); margin-top: 12px; }
.desk-stats .stats-grid,.works-content .desk-stats .stats-grid { grid-template-columns: 1fr; gap: 0; }
.desk-stats .stat-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.desk-stats .stat-card strong { font-size: 30px; }
.works-content > .collection-section, .works-content > .desk-stats { height: 620px; min-height: 620px; }
.desk-feature { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: 1.2fr 1fr; min-height: 330px; border-radius: 22px; overflow: hidden; color: var(--desk-light); background: var(--desk-dark); }
.feature-copy { padding: 38px 42px 72px; position: relative; z-index: 1; }
.feature-copy .eyebrow { color: #b4c6b5; }
.feature-copy h2 { max-width: 600px; margin: 24px 0 14px; font-family: var(--heading-font); font-size: clamp(30px,3.3vw,48px); font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; }
.feature-copy > p:not(.eyebrow) { color: #c3cfc4; font-size: 12px; line-height: 1.8; }
.feature-copy .primary-button { margin-top: 20px; padding: 12px 22px; background: #e6ecdc; color: #263c33; border-radius: 30px; }
.feature-copy .primary-button span { margin-left: 28px; }
.feature-art { position: relative; min-height: 290px; display: grid; place-items: center; overflow: hidden; }
.art-orbit { position: absolute; width: 320px; height: 320px; border: 1px solid #c5d5c62b; border-radius: 50%; }
.art-orbit::after { content: ''; position: absolute; inset: 32px; border: 1px solid #c5d5c61a; border-radius: 50%; }
.art-book { width: 155px; height: 216px; transform: rotate(12deg); background: #e7e3d3; color: #344b3b; padding: 24px 20px; border-radius: 2px 8px 8px 2px; box-shadow: 12px 16px 28px #0003,inset 6px 0 0 #bfbca9; display: flex; flex-direction: column; justify-content: space-between; }
.art-book span { font: 10px/1.6 Georgia,serif; letter-spacing: .16em; }
.art-book i { font: normal 58px/1 serif; align-self: end; }
.art-book small { font-size: 9px; }
.art-caption { position: absolute; right: 24px; bottom: 64px; font: 7px Arial,sans-serif; letter-spacing: .18em; color: #c3cfc4; }
.feature-foot { position: absolute; bottom: 0; inset-inline: 0; display: flex; justify-content: space-between; gap: 12px; padding: 16px 32px; border-top: 1px solid #e4ecdc24; font-size: 10px; color: #c3cfc4; }
#writeModule .writing-layout { max-width: 1600px; width: auto; margin: 0 28px 40px; display: grid; grid-template-columns: 190px minmax(0,1fr) 260px; gap: 18px; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
#writeModule .left-sidebar { padding: 22px 10px 20px 0; border: 0; background: transparent; }

/* Memo proportions: the two left tools together match the notes column. */
.memo-upper-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 24px; align-items: stretch; }
.memo-left-column { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; min-width: 0; }
.memo-upper-grid > .memo-section, .memo-left-column > .memo-section { min-width: 0; margin: 0; min-height: 0; }
.memo-todo-section, .memo-pomodoro-section, .memo-upper-grid > .memo-section { height: 620px; overflow: hidden; }
.memo-todo-section, .memo-pomodoro-section { overflow: auto; }
.memo-content > .memo-section { margin-top: 24px; }

/* Reading shelf cards keep the page calm while retaining every management action. */
.reader-book-actions { justify-content: flex-end; align-items: center; }
.reader-book-menu { position: relative; }
.reader-book-menu summary { list-style: none; cursor: pointer; min-width: 38px; min-height: 34px; display: grid; place-items: center; border: 1px solid var(--ui-hairline); border-radius: var(--ui-radius); color: var(--muted); font-size: 18px; line-height: 1; }
.reader-book-menu summary::-webkit-details-marker { display: none; }
.reader-book-menu-body { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 8; display: grid; gap: 6px; min-width: 150px; padding: 8px; background: var(--ui-glass, var(--surface)); border: 1px solid var(--ui-hairline); border-radius: 8px; box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 12%, transparent); }
.reader-book-menu-body select, .reader-book-menu-body button, .reader-book-menu-body label { width: 100%; }

/* Capsule editor concept: a letter desk with a visible seal and opening promise. */
.capsule-editor { position: relative; max-width: 900px; overflow: hidden; padding: 34px clamp(22px, 5vw, 64px) 40px !important; background: color-mix(in srgb, var(--surface) 92%, #d7c7a8) !important; border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.capsule-editor::before { content: ''; position: absolute; inset: 14px; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); pointer-events: none; }
.capsule-letterhead { position: relative; display: flex; justify-content: space-between; gap: 16px; margin-bottom: 24px; color: var(--accent); font-size: 11px; letter-spacing: .18em; }
.capsule-editor > input, .capsule-editor > textarea, .capsule-editor > label, .capsule-editor > .life-actions, .capsule-editor > button { position: relative; }
.capsule-editor > input { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 12px 2px !important; }
.capsule-editor > textarea { min-height: 260px; margin: 18px 0; padding: 18px 2px !important; background: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, color-mix(in srgb, var(--line) 70%, transparent) 36px) !important; border: 0 !important; border-radius: 0 !important; line-height: 36px !important; }
.capsule-date { display: block; margin-top: 18px; color: var(--muted); font-size: 12px; }
.capsule-presets { margin: 10px 0 0 !important; }
.capsule-seal { position: absolute; right: clamp(28px, 6vw, 76px); bottom: 78px; width: 58px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #a75e54; color: #f5e9dc; font-family: var(--heading-font); box-shadow: 0 4px 0 #7c443e; transform: rotate(-12deg); }

@media (max-width: 900px) { .collection-section, .works-content > .collection-section, .works-content > .desk-stats, .memo-todo-section, .memo-pomodoro-section, .memo-upper-grid > .memo-section { height: auto; min-height: 0; } .collection-section .works-grid { height: auto; overflow: visible; } .work-card { height: auto; min-height: 0; } .memo-upper-grid { grid-template-columns: 1fr; } .memo-left-column { grid-template-rows: auto auto; } }
@media (max-width: 620px) { .capsule-editor { padding-inline: 18px !important; } .capsule-seal { right: 24px; bottom: 82px; } .reader-book-menu-body { right: auto; left: 0; } }
#writeModule .panel-heading { margin-bottom: 24px; }
#writeModule .editor-panel { border: 0; border-radius: 12px; box-shadow: none; }
#writeModule .editor-toolbar { padding: 16px 22px; border-radius: 12px 12px 0 0; }
#writeModule .title-input { padding: 38px 42px 22px; font-size: 30px; }
#writeModule .editor { padding: 16px 42px 60px; min-height: 60vh; line-height: 2.15; }
#writeModule .volume-editor { padding: 26px 42px 0; }
#writeModule #resourceWorkspace { border: 0; border-radius: 14px; background: color-mix(in srgb,var(--surface) 60%,var(--bg)); padding: 20px 14px; }
.memo-content { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 22px; align-items: start; }
.memo-content > .memo-section { margin: 0; min-width: 0; border-radius: 20px; }
.memo-content > .memo-notes-section { grid-column: 2; grid-row: 1; }
.memo-content > .memo-statistics-section { grid-column: 1 / -1; grid-row: 2; }
.memo-content .notes-grid { grid-template-columns: 1fr; }
.reader-content #readerShelf { padding: 32px; border-radius: 20px; }
.reader-books { grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 24px; }
.reader-book { border-radius: 4px 16px 16px 4px; border-left: 5px solid var(--accent); }
.life-page { max-width: 1500px; padding: 40px 36px; margin: 0 auto; }
.life-page > h1 { font-family: var(--heading-font); font-size: 40px; font-weight: 500; }
@media (min-width: 901px) {
  .app-shell > main { margin-left: var(--desk-rail); }
  .topbar { position: fixed; inset: 0 auto 0 0; width: var(--desk-rail); height: 100dvh; min-height: 0; padding: 38px 20px 24px; display: flex; flex-direction: column; align-items: stretch; gap: 44px; border: 0; border-right: 1px solid var(--line); background: var(--ui-glass); }
  .brand { width: auto; gap: 12px; font-size: 15px; align-items: start; }
  .brand-mark { flex-shrink: 0; width: 32px; height: 40px; border-radius: 3px; background: var(--accent); color: var(--surface); }
  .main-nav { display: flex; flex-direction: column; align-items: stretch; gap: 8px; align-self: auto; }
  .main-nav .nav-item { width: 100%; min-height: 50px; padding: 14px 16px; text-align: left; border-radius: 10px; font-size: 13px; display: flex; gap: 16px; align-items: center; }
  .nav-item::before { content: '◷'; font: 16px/1 Georgia,serif; opacity: .7; }
  .nav-item[data-module=works]::before { content: '▦'; }
  .nav-item[data-module=write]::before { content: '✎'; }
  .nav-item[data-module=memo]::before { content: '▤'; }
  .nav-item[data-module=reader]::before { content: '▥'; }
  .nav-item[data-module=life]::before { content: '✧'; }
  .main-nav .nav-item::after { display: none; }
  .main-nav .nav-item.active { background: var(--text); color: var(--bg); }
  .top-actions { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: start; align-items: center; }
  .poem-switch { flex-basis: 100%; text-align: left; line-height: 2; font-size: 11px; white-space: normal; padding: 12px 0; border-top: 1px solid var(--line); }
  .top-actions #globalSearchButton { flex: 1; min-width: 0; padding: 8px; font-size: 11px; }
}
@media (min-width: 901px) and (max-width: 1250px) {
  :root { --desk-rail: 174px; }
  .topbar { padding-inline: 14px; }
  .brand { font-size: 13px; gap: 8px; }
  #writeModule .writing-layout { grid-template-columns: 160px minmax(0,1fr) 220px; gap: 12px; margin-inline: 20px; }
  .workspace-heading,.works-content,.memo-content,.reader-content { padding-inline: 24px; }
}
@media (max-width: 1100px) {
  #writeModule .writing-layout { grid-template-columns: 165px minmax(0,1fr); }
  .memo-content { grid-template-columns: 1fr; }
  .memo-content > .memo-section:nth-child(n) { grid-column: auto; grid-row: auto; }
  .works-content { grid-template-columns: minmax(0,1fr); }
  .works-content > .works-section { grid-column: 1; grid-row: auto; }
}
@media (max-width: 900px) {
  .brand small { display: none; }
  .topbar { position: sticky; top: 0; gap: 8px 12px; }
  .feature-copy { padding-left: 28px; }
  .workspace-heading { padding-top: 32px; }
  #writeModule .writing-layout { margin-inline: 16px; }
}
@media (max-width: 620px) {
  .workspace-heading { padding: 28px 18px 24px; flex-wrap: wrap; }
  .workspace-heading h1 { font-size: 30px; }
  .heading-deck { font-size: 11px; margin-top: 10px; }
  .works-content,.memo-content,.reader-content { padding-inline: 12px; gap: 16px; }
  .works-content > .works-section { padding: 20px; border-radius: 16px; }
  .desk-feature { grid-template-columns: 1fr; min-height: 320px; border-radius: 16px; }
  .feature-copy { padding: 28px 24px 76px; max-width: 85%; }
  .feature-copy h2 { font-size: 32px; margin-top: 20px; }
  .feature-art { position: absolute; right: -66px; bottom: 60px; width: 150px; min-height: 170px; opacity: .3; transform: rotate(8deg); }
  .art-book { width: 100px; height: 145px; padding: 16px; }
  .art-book i { font-size: 32px; }
  .art-book span { font-size: 7px; }
  .art-caption { display: none; }
  .feature-foot { padding-inline: 20px; font-size: 9px; }
  .works-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .work-open img,.cover-placeholder { height: 175px; }
  #writeModule .writing-layout { display: flex; flex-direction: column; margin-inline: 10px; gap: 12px; }
  #writeModule .left-sidebar { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  #writeModule .left-sidebar .panel-heading { margin-bottom: 12px; }
  #writeModule .chapter-tree { max-height: 170px; overflow: auto; margin: 12px 0; }
  #writeModule .title-input { padding: 26px 22px 14px; font-size: 25px; }
  #writeModule .editor { padding: 14px 22px 40px; font-size: 16px; }
  #writeModule .volume-editor { padding-inline: 22px; }
  #writeModule .editor-toolbar { padding: 12px 16px; }
  .reader-content #readerShelf { padding: 18px; }
  .life-page { padding: 24px 12px; }
  .life-page > h1 { font-size: 30px; }
}
@media print { .app-shell > main { margin: 0; } }

/* Final proportions for the desktop workbench. */
@media (min-width: 1101px) {
  .works-content > .collection-section, .works-content > .desk-stats { height: 620px; min-height: 620px; }
  .collection-section { overflow: hidden; }
  .collection-section .works-grid { height: calc(100% - 62px); overflow-y: auto; align-content: start; }
  .memo-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: 1fr auto; align-items: stretch; }
  .memo-content > .memo-notes-section { grid-column: 2; grid-row: 1; height: 620px; overflow: hidden; }
  .memo-content > .memo-statistics-section { grid-column: 1 / -1; grid-row: 2; }
  .memo-content > .memo-left-column { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: 1fr 1fr; gap: 24px; height: 620px; }
  .memo-content > .memo-left-column > .memo-section { min-height: 0; overflow: auto; }
}
.work-card { height: 492px; min-height: 492px; display: flex; flex-direction: column; overflow: hidden; }
.work-open { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.reader-book-menu-body { background: var(--surface); }
@media (max-width: 1100px) {
  .memo-content > .memo-notes-section, .memo-content > .memo-statistics-section { grid-column: auto; grid-row: auto; height: auto; }
  .memo-content > .memo-left-column { display: contents; }
}
@media (max-width: 900px) { .work-card { height: auto; min-height: 0; } }

/* Keep these relationships after the legacy finishing rules above. */
@media (min-width: 1101px) {
  .works-content > .collection-section, .works-content > .desk-stats { height: 620px; min-height: 620px; }
  .collection-section .works-grid { height: calc(100% - 62px); overflow-y: auto; }
  .memo-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: 1fr auto; }
  .memo-content > .memo-left-column { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: 1fr 1fr; gap: 24px; height: 620px; }
  .memo-content > .memo-left-column > .memo-section { min-height: 0; overflow: auto; }
  .memo-content > .memo-notes-section { grid-column: 2; grid-row: 1; height: 620px; overflow: hidden; }
  .memo-content > .memo-statistics-section { grid-column: 1 / -1; grid-row: 2; }
}

/* Module finishing: manuscript, library, notebook and correspondence. */
#writeModule #manuscriptDirectory[hidden] { display: none; }
#writeModule .writing-layout.directory-collapsed { grid-template-columns: minmax(0,1fr); }
#directoryToggle { flex-shrink: 0; white-space: nowrap; }
#writeModule .writing-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
#writeModule .writing-controls :is(#directoryToggle,#resourceToggle,.writing-more > summary) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; margin: 0; padding: 7px 11px; border: 1px solid transparent;
  border-radius: 6px; background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; line-height: 20px; white-space: nowrap;
  box-shadow: none; cursor: pointer; list-style: none;
}
#writeModule .writing-controls :is(#directoryToggle,#resourceToggle,.writing-more > summary):hover {
  color: var(--text); background: var(--accent-soft);
}
#writeModule .writing-controls :is(#directoryToggle,#resourceToggle,.writing-more > summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
#writeModule .writing-controls :is([aria-expanded=true],.writing-more[open] > summary) { color: var(--accent); background: var(--accent-soft); }
#directoryToggle::before { content: '☷'; font-size: 16px; }
#resourceToggle::before { content: '◧'; font-size: 16px; }
#writeModule .writing-more > summary::after { content: '⌄'; font-size: 14px; }
#writeModule .writing-more[open] > summary::after { transform: rotate(180deg); }
#writeModule .editor-toolbar > div:first-child { flex: 1; min-width: 0; }
#writeModule .toolbar-actions:empty { display: none; }
@media (min-width: 1101px) {
  #writeModule .writing-layout.directory-collapsed { grid-template-columns: minmax(0,1fr) 190px; }
}
#writeModule .workspace-heading { padding-block: 24px 18px; }
#writeModule .workspace-heading h1 { font-size: 25px; margin-top: 5px; }
#writeModule .heading-deck { display: none; }
#writeModule .title-input { padding: 28px 28px 14px; }
#writeModule .editor { padding: 12px 28px 48px; line-height: 2; }
#writeModule .volume-editor { padding: 20px 28px 0; }
#writeModule #resourceWorkspace { background: transparent; padding-inline: 10px; }
@media (min-width: 1101px) {
  #writeModule .writing-layout { grid-template-columns: 150px minmax(0,1fr) 190px; gap: 16px; margin-inline: 22px; }
}
@media (min-width: 1101px) {
  .memo-content { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .memo-content > .memo-notes-section { grid-column: 2; grid-row: 1; }
  .memo-content > .memo-statistics-section { grid-column: 1 / -1; grid-row: 2; }
}
.memo-content > .memo-section { padding: 24px; border-radius: 16px; }
.memo-content .memo-heading { align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.memo-content .note-card { box-shadow: none; background: color-mix(in srgb,var(--surface) 65%,var(--bg)); }
#readerShelf .memo-filters { margin-block: 24px 16px; }
#readerSearch { width: 100%; flex: 1 1 100%; min-width: 0; padding: 16px 20px; border-radius: 12px; background: var(--bg); font-size: 15px; }
#readerShelf:has(#shelfFilterChips) #readerGroupFilter,
#readerShelf:has(#shelfFilterChips) #readerArchiveFilter { display: none; }
.shelf-filter-chips { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.shelf-categories,.shelf-segments { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.shelf-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid transparent; border-radius: 24px; color: var(--muted); overflow-wrap: anywhere; }
.shelf-chip span { font-size: 10px; font-variant-numeric: tabular-nums; opacity: .75; }
.shelf-chip[aria-pressed=true] { background: var(--accent-soft); color: var(--text); border-color: var(--line); }
.shelf-segments { padding: 4px; border-radius: 10px; background: var(--bg); }
.shelf-segment { padding: 8px 12px; border-radius: 7px; color: var(--muted); }
.shelf-segment[aria-pressed=true] { background: var(--surface); color: var(--text); box-shadow: 0 2px 6px color-mix(in srgb,var(--text) 8%,transparent); }
.reader-book { border: 0; background: transparent; box-shadow: none; }
.reader-cover { box-shadow: 6px 8px 16px color-mix(in srgb,var(--text) 12%,transparent); border-radius: 2px 8px 8px 2px; }
.reader-cover-art { position: relative; border-left: 7px solid color-mix(in srgb,var(--accent) 55%,var(--surface)); background: linear-gradient(110deg,var(--accent-soft),var(--surface)); }
.reader-cover-art::after { content: ''; position: absolute; inset: 10px 8px 10px auto; width: 3px; border-inline: 1px solid var(--line); }
.reader-book-actions { padding-top: 12px; border-top: 1px solid var(--line); gap: 8px; }
.life-tabs { gap: 6px; padding: 6px; border-bottom: 1px solid var(--line); margin-block: 22px 30px; }
.life-tabs button { padding: 10px 18px; border-radius: 20px; }
.life-card { overflow-wrap: anywhere; }
.star-balance { position: relative; isolation: isolate; overflow: hidden; display: block; padding: 32px; margin-block: 16px; border: 1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius: 20px; background: radial-gradient(ellipse at top right,color-mix(in srgb,#d5ae62 22%,transparent),transparent 65%),var(--surface); font-family: var(--heading-font); font-size: clamp(30px,5vw,54px); letter-spacing: .04em; color: var(--text); }
.star-balance::after { content: '✦'; position: absolute; z-index: -1; right: 24px; top: -22px; font-size: 155px; line-height: 1.3; color: color-mix(in srgb,#d5ae62 20%,transparent); transform: rotate(12deg); }
.life-grid .life-card { position: relative; padding: 26px; border-style: dashed; border-radius: 4px 18px 18px 4px; border-left: 5px solid var(--accent); box-shadow: 0 5px 16px color-mix(in srgb,var(--text) 4%,transparent); }
.life-grid .life-card h3 { font-family: var(--heading-font); font-size: 22px; font-weight: 500; margin-bottom: 16px; }
.life-grid .life-card button { margin-top: 12px; border-radius: 22px; }
.diary-book { max-width: 900px; padding: 34px 48px 28px 62px; border-radius: 3px 18px 18px 3px; background: linear-gradient(90deg,color-mix(in srgb,var(--text) 7%,transparent),transparent 20px),var(--surface); box-shadow: 4px 4px 0 var(--bg),5px 5px 0 var(--line),0 16px 40px color-mix(in srgb,var(--text) 6%,transparent); }
.diary-book::before { content: ''; position: absolute; inset: 0 auto 0 40px; width: 1px; background: color-mix(in srgb,var(--accent) 23%,transparent); }
.diary-book > h2 { font-family: var(--heading-font); font-size: clamp(24px,3vw,34px); font-weight: 500; letter-spacing: .08em; margin-bottom: 22px; }
.diary-book .rich-editor { line-height: 32px; padding-top: 0; min-height: 320px; background: repeating-linear-gradient(transparent 0 31px,color-mix(in srgb,var(--line) 65%,transparent) 31px 32px); }
.diary-meta input { background: transparent !important; border-width: 0 0 1px !important; border-radius: 0 !important; font-size: 12px; }
.diary-book .life-actions { padding-top: 18px; opacity: .8; }
.life-page form.life-card:has(textarea) { position: relative; padding: 32px; border-top: 4px double var(--accent); border-radius: 4px 4px 16px 16px; background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent 55%),var(--surface); }
.life-page form.life-card textarea { padding: 20px; line-height: 2; background: transparent; border-style: dashed; }
.life-page form.life-card .life-actions button { border: 1px dashed var(--accent); border-radius: 3px; padding: 10px 14px; transform: rotate(-2deg); }
.life-page form.life-card ~ article.life-card { position: relative; padding: 30px; border-radius: 4px; border-top: 6px solid var(--accent-soft); background: linear-gradient(160deg,color-mix(in srgb,var(--accent) 7%,var(--surface)) 24%,var(--surface) 24.3%); }
.life-page form.life-card ~ article.life-card h3 { font: 500 23px/1.5 var(--heading-font); padding-right: 45px; }
.life-page form.life-card ~ article.life-card::after { content: '✉'; position: absolute; top: 20px; right: 24px; color: var(--accent); font-size: 28px; }
.shelf-chip:focus-visible,.shelf-segment:focus-visible,.life-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.desk-feature { --desk-dark: color-mix(in srgb,var(--accent) 28%,var(--text)); --desk-light: var(--bg); }
.feature-copy .eyebrow,.feature-copy > p:not(.eyebrow),.art-caption,.feature-foot { color: inherit; }
.feature-copy .primary-button { background: var(--bg); color: var(--text); }
.art-book { background: var(--surface); color: var(--text); box-shadow: 12px 16px 28px #0003,inset 6px 0 0 var(--line); }
@media (max-width: 620px) {
  #writeModule .title-input { padding: 22px 20px 12px; }
  #writeModule .editor { padding: 12px 20px 36px; }
  #writeModule .volume-editor { padding-inline: 20px; }
  .memo-content > .memo-section { padding: 18px; }
  .shelf-filter-chips { gap: 12px; }
  .shelf-segments { width: 100%; }
  .shelf-segment { flex: 1; padding-inline: 7px; }
  .diary-book { padding: 24px 20px 24px 30px; }
  .diary-book::before { left: 18px; }
  .star-balance { padding: 24px; }
  .life-page form.life-card:has(textarea),.life-page form.life-card ~ article.life-card { padding: 22px 18px; }
}

/* Quiet manuscript, two-column memo desk and glass bookshelf search. */
#writeModule #editor,#writeModule #editor:focus,#writeModule #editor:focus-visible {
  border: 0; outline: none; box-shadow: none; border-radius: 0;
}
.memo-left-column { display: grid; gap: 22px; min-width: 0; }
.memo-left-column > .memo-section { margin: 0; padding: 24px; border-radius: 16px; min-width: 0; }
#focusStatistics { overflow-x: auto; }
.memo-content > .memo-notes-section { grid-column: 2; grid-row: 1; }
.memo-content > .memo-statistics-section { grid-column: 1 / -1; grid-row: 2; }
#readerShelf #readerSearch {
  border: 1px solid color-mix(in srgb,var(--surface) 80%,var(--line)) !important;
  border-radius: 30px !important;
  background: linear-gradient(135deg,color-mix(in srgb,var(--surface) 74%,transparent),color-mix(in srgb,var(--accent-soft) 28%,transparent)) !important;
  backdrop-filter: blur(22px) saturate(155%); -webkit-backdrop-filter: blur(22px) saturate(155%);
  box-shadow: inset 0 1px 1px #ffffff85,inset 0 -1px 1px #ffffff20,0 8px 24px color-mix(in srgb,var(--text) 7%,transparent);
  padding: 17px 24px; color: var(--text); transition: box-shadow .25s,border-color .25s;
}
#readerShelf #readerSearch:focus { outline: 2px solid color-mix(in srgb,var(--accent) 65%,transparent); outline-offset: 3px; box-shadow: inset 0 1px 2px #ffffff90,0 10px 30px color-mix(in srgb,var(--accent) 15%,transparent); }
#readerSearch::placeholder { color: var(--muted); opacity: 1; }
.reward-grid { gap: 22px; margin-block: 22px; }
.reward-card { position: relative; min-width: 0; border-radius: 22px; background: radial-gradient(ellipse at 90% 0,color-mix(in srgb,#ddb967 20%,transparent),transparent 65%),var(--surface); border: 1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); box-shadow: inset 0 1px 0 #ffffff50,0 8px 22px color-mix(in srgb,var(--text) 6%,transparent); transition: transform .25s,box-shadow .25s; }
.reward-claim { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 250px; padding: 28px; text-align: left; border-radius: inherit; }
.reward-emblem { align-self: flex-end; font: 48px/1 Georgia,serif; color: var(--accent); }
.reward-claim small,.reward-reveal > small { font: 10px/2 Georgia,serif; letter-spacing: .2em; color: var(--muted); }
.reward-claim h3 { margin: 14px 0 20px; font: 500 25px/1.5 var(--heading-font); }
.reward-price { color: var(--accent); }
.reward-hint { margin-top: 22px; padding-top: 14px; width: 100%; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.reward-claim:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) { .reward-card:hover { transform: translateY(-5px) scale(1.025); box-shadow: 0 18px 36px color-mix(in srgb,var(--text) 13%,transparent); } }
.reward-management { margin-block: 20px; color: var(--muted); }
.reward-management summary { cursor: pointer; }
.reward-management .life-actions { justify-content: space-between; padding-block: 10px; border-bottom: 1px solid var(--line); }
#rewardClaimDialog { width: min(460px,calc(100vw - 32px)); overflow: hidden; }
#rewardClaimDialog::backdrop { background: #10171077; backdrop-filter: blur(8px); }
.reward-reveal { position: relative; isolation: isolate; text-align: center; padding: 24px 12px 32px; }
.reward-reveal h2 { font: 500 30px/1.5 var(--heading-font); }
.reward-reveal p { line-height: 1.9; }
.reward-reveal-mark { margin: 0 auto 20px; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 64px/1 Georgia,serif; }
.reward-reveal.is-redeemed::before { content: ''; position: absolute; z-index: -1; inset: 10% -30%; border-radius: 50%; background: radial-gradient(ellipse,color-mix(in srgb,#dfbc6a 35%,transparent),transparent 68%); animation: reward-bloom .8s ease-out both; }
.reward-reveal.is-redeemed .reward-reveal-mark { animation: reward-pop .65s ease-out both; }
@keyframes reward-pop { 0% { transform: scale(.7) rotate(-14deg); } 45% { transform: scale(1.18) rotate(9deg); } 70% { transform: scale(.96) rotate(-4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes reward-bloom { from { transform: scale(.15); opacity: 0; } to { transform: scale(1.5); opacity: 1; } }
@media (max-width: 760px) {
  .memo-content { grid-template-columns: minmax(0,1fr); }
  .memo-content > .memo-notes-section,.memo-content > .memo-statistics-section { grid-column: 1; grid-row: auto; }
  .memo-left-column > .memo-section { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .reward-card,#readerShelf #readerSearch { transition: none; }
  .reward-card:hover { transform: none; }
  .reward-reveal.is-redeemed::before,.reward-reveal.is-redeemed .reward-reveal-mark { animation: none; }
}

/* Compact management controls stay inside their cards when expanded. */
.work-card,.work-card:hover,.work-open,.work-open:hover,.work-open img,.cover-placeholder { box-shadow: none; }
.work-card { transition: transform .2s ease, border-color .2s ease; }
@media (hover: hover) { .work-card:hover { transform: translateY(-3px); border-color: var(--accent); } }
.work-management { flex: 0 0 auto; max-height: 190px; overflow-y: auto; margin-top: 8px; border-top: 1px solid var(--line); }
.work-management summary,.reader-book-menu summary,.writing-history summary,.capsule-management summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 4px; color: var(--muted); font-size: 13px; }
:is(.work-management,.reader-book-menu,.writing-history,.capsule-management) > summary::-webkit-details-marker { display: none; }
:is(.work-management,.reader-book-menu,.writing-history,.capsule-management) > summary::before { content: '›'; font-size: 18px; line-height: 1; transition: transform .2s; }
:is(.work-management,.reader-book-menu,.writing-history,.capsule-management)[open] > summary::before { transform: rotate(90deg); }
:is(.work-management,.reader-book-menu,.writing-history,.capsule-management) > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.work-management .work-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 8px; }
.reader-book-actions { display: block; }
.reader-book-menu summary { min-height: 40px; border: 0; border-radius: 0; justify-content: flex-start; }
.reader-book-menu-body { position: static; min-width: 0; display: flex; flex-wrap: wrap; padding: 8px 0; box-shadow: none; border: 0; background: transparent; }
.reader-book-menu-body select,.reader-book-menu-body button,.reader-book-menu-body label { width: auto; max-width: 100%; }
.writing-history { min-height: 0; margin-top: 12px; }
.desk-stats { overflow: auto; }
#writingRecords { max-height: 200px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#writingRecords th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.life-page form.capsule-editor { display: flex; flex-direction: column; gap: 10px; }
.capsule-editor .capsule-letterhead { margin-bottom: 10px; }
.capsule-editor .capsule-date { margin: 8px 0 0; }
.capsule-editor > input[type=datetime-local] { width: 100%; min-height: 44px; color-scheme: light dark; }
.capsule-editor > textarea { width: 100%; resize: vertical; }
.capsule-editor > button[type=submit] { align-self: flex-start; margin-top: 12px; margin-right: 80px; }
.capsule-editor .capsule-seal { bottom: 30px; }
.capsule-shelf { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 20px; }
.capsule-envelope { position: relative; margin: 0; padding: 30px 26px; overflow: hidden; border-radius: 6px; background: linear-gradient(155deg,transparent 48%,var(--line) 49%,transparent 50%) top right / 100% 72px no-repeat,var(--surface); }
.capsule-envelope > small { display: block; margin-bottom: 42px; letter-spacing: .15em; color: var(--muted); }
.capsule-envelope h3 { padding-right: 40px; }
.envelope-seal { position: absolute; right: 24px; top: 68px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #a75e54; color: #fff3e8; transform: rotate(-10deg); }
.capsule-status { color: var(--muted); font-size: 13px; }
.capsule-envelope.is-ready { border-color: var(--accent); }
.capsule-envelope.is-ready .capsule-status { color: var(--accent); }
.capsule-management { margin-top: 18px; border-top: 1px solid var(--line); }
#capsuleLetterDialog { width: min(760px,calc(100vw - 24px)); max-height: 90svh; overflow-y: auto; }
.capsule-letter { padding: 24px clamp(10px,4vw,42px); line-height: 2; }
.capsule-letter small { color: var(--muted); letter-spacing: .12em; }
.capsule-letter-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-block: 28px; }
@media (prefers-reduced-motion: reduce) { .work-card { transition: none; } .work-card:hover { transform: none; } }

/* Keep the memo desk and portfolio proportions authoritative on desktop. */
@media (min-width: 1101px) {
  .works-content > .collection-section,
  .works-content > .desk-stats { height: 620px; min-height: 620px; }
  .collection-section { overflow: hidden; }
  .collection-section .works-grid { height: calc(100% - 62px); overflow-y: auto; align-content: start; }
  .memo-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: 620px auto; }
  .memo-content > .memo-left-column { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; height: 620px; }
  .memo-content > .memo-left-column > .memo-section { height: auto; min-height: 0; margin: 0; overflow: auto; }
  .memo-content > .memo-notes-section { grid-column: 2; grid-row: 1; height: 620px; margin: 0; overflow: auto; }
  .memo-content > .memo-statistics-section { grid-column: 1 / -1; grid-row: 2; }
}

/* Quiet scroll regions retain wheel, touch and keyboard scrolling. */
html,body,.module,.works-grid,.desk-stats,#writingRecords,.memo-section,.notes-grid,.note-card textarea,.record-scroll,.right-sidebar,.resource-content,.chapter-tree,.reader-directory,#readingViewport,.settings-content,dialog,.editor {
  scrollbar-width: none; scrollbar-gutter: auto;
}
:is(html,body,.module,.works-grid,.desk-stats,#writingRecords,.memo-section,.notes-grid,.note-card textarea,.record-scroll,.right-sidebar,.resource-content,.chapter-tree,.reader-directory,#readingViewport,.settings-content,dialog,.editor)::-webkit-scrollbar { display: none; }
.work-card,.work-card:hover,.work-open,.work-open:hover,.work-open:focus { background: transparent; box-shadow: none; }
.work-card::before,.work-card::after,.work-open::before,.work-open::after { box-shadow: none; background: none; }
.work-open:hover { color: var(--accent); }
.recycle-preview-button { flex: 1; text-align: left; padding: 12px 0; color: var(--text); background: transparent; border: 0; cursor: pointer; }
#recyclePreviewDialog { width: min(800px,calc(100vw - 32px)); max-height: 88svh; overflow: auto; }
.recycle-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.9; padding-block: 12px 24px; border-bottom: 1px solid var(--line); }
.timer-help { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 12px 0; }
#pomodoroPanel > .tools-bar { gap: 8px; }
#pomodoroPanel > .tools-bar button { min-height: 38px; padding: 8px 20px; border-radius: 8px; }
.resource-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; }
.resource-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding-bottom: 14px; }
.resource-nav button { padding: 9px 4px; font-size: 12px; white-space: nowrap; border-radius: 6px; }
.resource-content { min-width: 0; }
.resource-content input,.resource-content select { width: 100%; min-width: 0; }
.resource-content .tools-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.resource-content .tools-bar input { flex-basis: 100%; }
.resource-section { margin-top: 20px; }
.resource-row { width: 100%; text-align: left; padding: 14px 10px; }
#writeModule .right-sidebar[hidden] { display: none; }
@media (min-width:1101px) {
  #writeModule .writing-layout { grid-template-columns: 220px minmax(0,1fr) 300px; }
  #writeModule .writing-layout.directory-collapsed { grid-template-columns: minmax(0,1fr) 300px; }
  #writeModule .writing-layout.resources-collapsed { grid-template-columns: 220px minmax(0,1fr); }
  #writeModule .writing-layout.directory-collapsed.resources-collapsed { grid-template-columns: minmax(0,1fr); }
  #writeModule .right-sidebar { padding: 20px; min-width: 0; }
}
.life-page form.capsule-editor { max-width: 1100px; display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 24px 36px; padding: 36px !important; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(120deg,color-mix(in srgb,var(--surface) 86%,#dfc59e),var(--surface)) !important; }
.capsule-editor::before { display: none; }
.capsule-paper { min-width: 0; }
.capsule-paper input { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.capsule-paper textarea { width: 100%; min-height: 270px; padding: 12px 0 !important; margin-top: 20px; border: 0 !important; border-radius: 0; background: repeating-linear-gradient(transparent 0 35px,var(--line) 35px 36px) !important; line-height: 36px !important; resize: vertical; }
.capsule-desk-envelope { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--muted); font-size: 12px; gap: 14px; }
.capsule-envelope-art { position: relative; width: 220px; height: 160px; border: 1px solid #bcaa8c; border-radius: 5px; background: linear-gradient(35deg,transparent 49.5%,#c7b390 50%,transparent 50.5%),linear-gradient(-35deg,transparent 49.5%,#c7b390 50%,transparent 50.5%),#eee0c3; transform: rotate(-8deg); box-shadow: 0 12px 22px #49341c18; }
.capsule-editor .capsule-seal { position: absolute; inset: 58px auto auto 82px; width: 56px; height: 56px; border: 5px double #bd8b70; background: #935747; }
.capsule-schedule { min-width: 0; }
.capsule-schedule input { width: 100%; min-height: 44px; margin-top: 8px; }
.capsule-editor .capsule-presets button { transform: none !important; border: 1px solid var(--line) !important; border-radius: 6px !important; }
.capsule-editor > button[type=submit] { align-self: end; margin: 0; min-height: 44px; }
@media(max-width:760px) {
  .life-page form.capsule-editor { grid-template-columns: minmax(0,1fr); padding: 22px 18px !important; }
  .capsule-desk-envelope { padding: 18px 0; }
  .capsule-letterhead { flex-wrap: wrap; }
}

/* Expanded writing actions take their own row above the manuscript. */
#writeModule .editor-toolbar { flex-wrap: wrap; height: auto; }
#writeModule .writing-action-tray { flex: 0 0 100%; min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
#writeModule .writing-action-tray[hidden] { display: none; }
#writeModule .writing-action-tray .writing-more-actions { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: auto; min-width: 0; padding: 6px; border: 0; border-radius: 10px; background: var(--bg); box-shadow: none; backdrop-filter: none; animation: none; }
#writeModule .writing-action-tray .writing-more-actions > button { width: auto; flex: 1 1 90px; min-height: 38px; margin: 0; padding: 9px 14px; border: 1px solid transparent; border-radius: 7px; background: transparent; text-align: center; color: var(--muted); font-size: 12px; }
#writeModule .writing-action-tray .writing-more-actions > button:hover { color: var(--text); border-color: var(--line); background: var(--surface); }
#writeModule .writing-action-tray button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Three paper folder tabs share an edge with the active content sheet. */
.life-page { max-width: 1160px; padding-inline: clamp(16px,3vw,40px); }
.life-tabs { display: flex; flex-wrap: nowrap; align-items: end; gap: 4px; padding: 0 8px; margin: 28px 0 0; border: 0; }
.life-tabs .life-fold-heading button { --folder-color: color-mix(in srgb,var(--accent) 19%,var(--surface)); position: relative; isolation: isolate; flex: 0 1 210px; min-height: 58px; padding: 16px 26px 12px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 14px; letter-spacing: .08em; }
.life-tabs .life-fold-heading button::before { content: ''; position: absolute; z-index: -1; inset: 5px -8px 0; border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 20px 0 0; background: var(--folder-color); transform: perspective(160px) rotateX(10deg); transform-origin: bottom; }
.life-tabs button:nth-child(2) { --folder-color: color-mix(in srgb,#b9c5ba 35%,var(--surface)); }
.life-tabs button:nth-child(3) { --folder-color: color-mix(in srgb,#95aec7 32%,var(--surface)); }
.life-tabs button[aria-selected=true] { z-index: 2; color: var(--text); font-weight: 600; }
.life-tabs button[aria-selected=true]::before { inset-block-start: 0; background: var(--surface); box-shadow: 0 -4px 10px color-mix(in srgb,var(--text) 3%,transparent); }
.life-tabs button[aria-selected=true]::after { content: ''; position: absolute; bottom: -2px; left: -4px; right: -4px; height: 4px; background: var(--surface); }
#lifeContent { position: relative; padding: clamp(20px,3.5vw,42px); border: 1px solid var(--line); border-radius: 0 16px 16px; background: var(--surface); min-height: 420px; }
#lifeContent > h2:first-child { margin-top: 0; }

/* The text baseline and the paper rules repeat on the same 36px grid. */
.diary-book { width: 100%; max-width: 860px; margin: 28px auto; padding: 42px 44px 32px 58px; }
.diary-book::before { left: 30px; }
.diary-book .rich-editor { --diary-line: 36px; padding: 0 4px 12px; font-size: 16px; line-height: var(--diary-line); background: repeating-linear-gradient(to bottom,transparent 0 28px,color-mix(in srgb,var(--line) 75%,transparent) 28px 29px,transparent 29px 36px); background-attachment: local; }
.diary-book .rich-editor :is(p,div,blockquote) { margin: 0; padding-block: 0; line-height: inherit; }
.diary-meta { gap: 16px; margin-bottom: 26px; }
.diary-book .life-actions { gap: 12px; opacity: 1; }

/* A memory record: writing on the left, vinyl emerging through a soft fade. */
.life-page form.capsule-editor { --record-ink: #272d35; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 0; padding: 0 !important; border: 1px solid var(--line); border-top-width: 1px; border-radius: 16px; background: linear-gradient(100deg,var(--surface) 0%,var(--surface) 42%,color-mix(in srgb,#9aafc2 28%,var(--surface)) 75%,color-mix(in srgb,#647e98 42%,var(--surface))) !important; }
.capsule-editor .capsule-paper { position: relative; z-index: 2; padding: 34px 0 24px 34px; }
.capsule-editor .capsule-letterhead { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; border: 0; color: var(--muted); }
.capsule-letterhead span:first-child { font: 10px/1.6 sans-serif; letter-spacing: .18em; }
.capsule-letterhead span:last-child { font-size: 13px; }
.life-page form.capsule-editor .capsule-paper input { padding: 12px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.capsule-paper input[aria-label='胶囊标题'] { font: 500 clamp(21px,2.4vw,30px)/1.5 var(--heading-font); }
.life-page form.capsule-editor .capsule-paper textarea { display: block; min-height: 240px; padding: 14px 0 !important; margin-top: 12px; border: 0 !important; background: transparent !important; line-height: 1.95 !important; font-size: 15px; resize: vertical; }
.capsule-record-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 38px 24px 24px 12px; }
.capsule-record-stage::before { content: ''; position: absolute; z-index: 1; inset: 0 auto 0 -2px; width: 32%; background: linear-gradient(90deg,var(--surface),transparent); pointer-events: none; }
.capsule-record-index { align-self: end; margin-bottom: 28px; color: var(--muted); font: 10px/1.5 sans-serif; letter-spacing: .22em; }
.capsule-record { position: relative; display: grid; place-items: center; width: 112%; max-width: 350px; aspect-ratio: 1; flex-shrink: 0; border-radius: 50%; background: repeating-radial-gradient(circle at center,#22252b 0 2px,#353941 2.5px 3px,#1b1e23 3.5px 5px); box-shadow: 12px 20px 30px #10192530,0 0 0 5px #22262c; }
.capsule-record::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from 25deg,transparent 0deg,#ffffff26 45deg,transparent 85deg,transparent 175deg,#ffffff1c 220deg,transparent 265deg); }
.capsule-record-label { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 43%; height: 43%; min-height: 0; padding: 8px; overflow: hidden; border: 3px double #ffffff45; border-radius: 50%; background: #95aabb; color: #263441; text-align: center; }
.capsule-record-label small { font: 7px/1.5 sans-serif; letter-spacing: .08em; }
.capsule-record-label strong { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font: 500 13px/1.4 var(--heading-font); }
.capsule-record-hole { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: #20252b; box-shadow: 0 0 0 3px #ffffff25; }
.capsule-record-caption { margin: 30px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .1em; text-align: center; }
.capsule-footer { position: relative; z-index: 2; grid-column: 1 / -1; display: flex; align-items: end; flex-wrap: wrap; gap: 20px; padding: 22px 34px 28px; border-top: 1px solid var(--line); background: color-mix(in srgb,var(--surface) 75%,transparent); }
.capsule-schedule { flex: 1 1 260px; }
.capsule-schedule .capsule-date { margin: 0; font-size: 12px; color: var(--muted); }
.capsule-schedule input { max-width: 300px; background: transparent !important; }
.capsule-footer .capsule-presets { gap: 6px; margin-top: 10px; }
.capsule-footer .capsule-presets button { padding: 7px 12px; background: transparent; font-size: 11px; }
.capsule-footer > button { min-height: 44px; padding: 12px 24px; border-radius: 24px; margin-bottom: 14px; }
@media(max-width:760px) {
  #lifeContent { padding: 22px 16px; }
  .life-tabs { padding-inline: 6px; gap: 3px; }
  .life-tabs button { flex: 1; min-width: 0; min-height: 52px; padding: 14px 8px 10px; font-size: 12px; letter-spacing: 0; }
  .diary-book { padding: 28px 22px 24px 32px; }
  .diary-book::before { left: 18px; }
  .life-page form.capsule-editor { grid-template-columns: minmax(0,1fr); }
  .capsule-editor .capsule-paper { padding: 26px 22px 0; }
  .capsule-record-stage { padding: 24px 28px 26px; background: linear-gradient(180deg,var(--surface),transparent); }
  .capsule-record-stage::before { display: none; }
  .capsule-record { width: 80%; max-width: 240px; }
  .capsule-record-index { margin-bottom: 18px; }
  .capsule-record-caption { margin-top: 22px; font-size: 11px; }
  .capsule-footer { padding: 22px; gap: 12px; }
  .capsule-footer > button { width: 100%; margin: 0; }
}

/* Full paper folders: curved tabs at left, centre and right, sharing one stack. */
.life-page .life-tabs { --folder-step: 72px; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: var(--folder-step) var(--folder-step) 100px auto; isolation: isolate; gap: 0; padding: 0; margin: 32px 0; }
.life-fold { --folder-paper: var(--folder-achievements,#c5c8c1); grid-area: 1 / 1 / 5 / 2; position: relative; display: grid; grid-template-rows: subgrid; min-width: 0; pointer-events: none; }
.life-fold[data-section=diary] { --folder-paper: var(--folder-diary,#d0c5c2); }
.life-fold[data-section=capsules] { --folder-paper: var(--folder-capsules,#bec7cc); }
.life-fold::after { content: ''; position: absolute; z-index: var(--stack-row); top: calc((var(--stack-row) - 1) * var(--folder-step) + 96px); inset-inline: 0; bottom: 0; background: var(--folder-paper); border-radius: 0 0 18px 18px; }
.life-fold-heading { grid-row: var(--stack-row); position: relative; z-index: var(--stack-row); height: 100px; margin: 0; font-size: inherit; filter: drop-shadow(0 -2px 3px #29342d18); }
.life-fold.is-open .life-fold-heading { filter: drop-shadow(0 -4px 5px #29342d30); }
.life-color-settings { margin: 12px 0; font-size: 13px; color: var(--muted); }
.life-color-settings summary { cursor: pointer; width: fit-content; padding: 6px 0; }
.life-color-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px 0; }
.life-color-controls label { display: flex; align-items: center; gap: 10px; }
.life-color-controls input[type=color] { width: 38px; height: 30px; min-height: 0; padding: 2px; cursor: pointer; }
.life-fold-heading::before { content: none; }
.life-folder-outline { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--folder-paper); }
.life-page .life-tabs .life-fold-heading button { position: absolute; left: calc(var(--tab-slot) * 32.222% + 1%); top: 0; display: flex; align-items: center; justify-content: center; width: 30%; min-height: 0; height: 64px; padding: 0 8px; margin: 0; border: 0; border-radius: 24px 24px 0 0; background: transparent; color: #414846; font-weight: 500; font-size: 15px; letter-spacing: .1em; pointer-events: auto; }
.life-page .life-tabs .life-fold-heading button::before,.life-page .life-tabs .life-fold-heading button::after { content: none; display: none; }
.life-page .life-tabs .life-fold-heading button:hover { color: #192e38; background: #ffffff18; }
.life-page .life-tabs .life-fold-heading button:focus-visible { outline: 2px solid #465f6e; outline-offset: -8px; }
.life-page .life-tabs .life-fold-heading button[aria-expanded=true] { font-weight: 600; }
.life-page .life-tabs #lifeContent { grid-row: 4; position: relative; z-index: 4; min-width: 0; min-height: 420px; padding: 10px clamp(18px,4vw,46px) 42px; border: 0; border-radius: 0 0 18px 18px; background: var(--folder-paper); pointer-events: auto; }
.life-page #lifeContent[hidden] { display: none; }
.rich-image-fold { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.rich-image-fold summary,.capsule-background-settings summary { width: fit-content; cursor: pointer; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; }
.rich-image-fold .life-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rich-image-fold input[hidden],.capsule-background-settings input[hidden] { display: none !important; }

/* One continuous canvas, rather than two coloured panels meeting in the middle. */
.life-page form.capsule-editor { border: 0 !important; border-radius: 18px; box-shadow: none; background: linear-gradient(115deg,#f2f0e9 12%,#e7e9e6 58%,#cbd7de 100%) !important; }
.life-page form.capsule-editor .capsule-paper { padding: 38px 22px 32px 38px; background: none !important; border: 0; }
.life-page form.capsule-editor .capsule-paper input { box-sizing: border-box; width: 100%; padding: 14px 18px !important; border: 0 !important; border-bottom: 1px solid #69797e35 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.life-page form.capsule-editor .capsule-paper textarea { box-sizing: border-box; width: 100%; min-height: 280px; padding: 22px 18px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline-offset: 3px; }
.life-page form.capsule-editor .capsule-paper :is(input,textarea):focus { outline: none; box-shadow: none; }
.life-page form.capsule-editor .capsule-record-stage { background: none !important; padding: 38px 30px 30px 18px; }
.capsule-record-stage::before { display: none; }
.capsule-record { width: 100%; }
.capsule-editor .capsule-letterhead { padding-inline: 18px; }
.capsule-background-settings { flex: 1 0 100%; min-width: 0; }
.capsule-background-settings .life-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.capsule-background-settings p { margin-bottom: 0; font-size: 12px; overflow-wrap: anywhere; }
.life-page .diary-book .diary-page-controls { display:flex; justify-content:flex-start; gap:10px; margin:0 0 28px; }
.life-page .diary-book .diary-page-controls input { width:auto; min-width:0; padding:8px 0; border:0; border-radius:0; background:transparent; font-size:clamp(19px,3vw,28px); }
.life-page .diary-book .diary-page-controls button { padding:4px 8px; border:0; background:transparent; border-radius:0; }
.life-page .rich-image-fold { border:0; padding:0; margin-top:18px; }
.life-page :is(.rich-image-fold,.capsule-background-settings) summary { display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; border-radius:6px; list-style:none; color:#58656b; background:transparent; }
.life-page :is(.rich-image-fold,.capsule-background-settings) summary::-webkit-details-marker { display:none; }
.life-page :is(.rich-image-fold,.capsule-background-settings) summary::marker { content:''; }
.life-page :is(.rich-image-fold,.capsule-background-settings) summary svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.4; }
.life-page :is(.rich-image-fold,.capsule-background-settings) summary:hover { background:#ffffff45; }
.life-page .capsule-footer { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.life-page .capsule-background-settings { position:relative; flex:1; }
.life-page .capsule-background-settings[open] .life-actions { position:absolute; bottom:44px; left:0; z-index:6; min-width:210px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); }
.life-page .capsule-background-settings > p { display:none; }
.life-page .capsule-footer > button,.capsule-send-dialog button { min-height:44px; padding:8px 12px; border:0; background:transparent; border-radius:6px; color:var(--text); }
.life-page .capsule-footer > .capsule-send,.capsule-send-dialog .capsule-send { color:var(--accent); font-weight:600; }
.capsule-send-dialog { width:min(440px,calc(100vw - 32px)); height:auto; min-height:0; max-height:calc(100dvh - 32px); padding:24px; box-sizing:border-box; background:var(--surface,#f5f2eb); backdrop-filter:none; }
.capsule-send-dialog header { margin-bottom:16px; }
.capsule-send-dialog header h2 { font-size:19px; }
.capsule-send-dialog .capsule-schedule > * { margin:0; }
.capsule-send-dialog .capsule-schedule { display:grid; gap:12px; margin-block:20px; }
.capsule-send-dialog input { width:100%; min-height:44px; box-sizing:border-box; padding:10px; }
.capsule-send-dialog .life-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.capsule-send-dialog .capsule-presets { justify-content:flex-start; }
.capsule-send-dialog .capsule-send-error { color:#a34839; }
.life-page form.capsule-editor.has-capsule-background,.capsule-letter.has-capsule-background { background-image: linear-gradient(105deg,#f4f1e8e8,#edf1f2c9),var(--capsule-photo) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.capsule-letter.has-capsule-background { padding: clamp(24px,4vw,48px); border-radius: 16px; color: #303a3d; }
.capsule-letter.has-capsule-background .muted { color: #58656b; }
@media(max-width:760px) {
  .life-page .life-tabs { --folder-step: 72px; margin-block: 24px; }
  .life-page .life-tabs .life-fold-heading button { padding: 0 3px; font-size: 12px; letter-spacing: .02em; }
  .life-page .life-tabs #lifeContent { padding: 8px 14px 24px; }
  .life-page form.capsule-editor .capsule-paper { padding: 26px 18px 18px; }
  .life-page form.capsule-editor .capsule-paper :is(input,textarea) { padding-inline: 14px !important; }
  .life-page form.capsule-editor .capsule-record-stage { padding: 20px 30px 30px; }
  .capsule-record { width: 80%; }
  .capsule-footer { padding: 22px 18px; }
}

/* Approved interaction pass: quiet covers, roomier tasks and one image entry. */
#worksGrid :is(.work-card,.work-open,.cover-placeholder,img),
#worksGrid :is(.work-card,.work-open):is(:hover,:focus-visible) { box-shadow: none; filter: none; }
.workspace-heading > :first-child { min-width: 0; }
.heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.heading-save { color: var(--muted); font-size: 12px; white-space: nowrap; }
.heading-actions > .upload-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: var(--ui-radius); }
#lifeModule .life-page { max-width: 1600px; margin: 0 auto; padding: 0 36px calc(48px + env(safe-area-inset-bottom)); }
#lifeModule .life-color-settings { margin-top: 0; }
#todoList,#completedList { display: grid; gap: 14px; }
#todoList { margin-top: 20px; }
.memo-content .todo-row { min-width: 0; padding: 18px; border: 1px solid var(--ui-hairline); border-radius: 12px; background: color-mix(in srgb,var(--surface) 72%,var(--bg)); }
.memo-content .todo-row.todo-due { border-left: 3px solid var(--accent); }
.todo-main { gap: 12px; flex-wrap: nowrap; }
.todo-main input[type=checkbox] { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--accent); }
.memo-content .todo-main input[type=text] { width: 0; min-width: 0; padding: 8px 4px; border-color: transparent; background: transparent; }
.todo-main .due-badge:empty { display: none; }
.todo-main .remove-button { flex: 0 0 auto; }
.todo-time { margin: 14px 0 0; line-height: 1.9; overflow-wrap: anywhere; }
.memo-content .todo-settings { margin-top: 14px; }
.todo-settings > .memo-bar { gap: 12px; padding: 8px 0 2px; }
.todo-settings input[type=datetime-local] { max-width: 100%; }
#todoFeedback[hidden] { display: none; }
#todoFeedback { margin-top: 16px; }
#todoFeedback .todo-undo { min-height: 48px; gap: 10px; padding: 8px 12px; border: 1px solid var(--ui-hairline); border-radius: 10px; background: var(--accent-soft); }
#todoFeedback .todo-undo > button { margin-left: auto; }
.todo-completion-emoji { flex: 0 0 auto; font-size: 25px; line-height: 1.3; animation: todo-emoji-bloom 1.6s ease both; }
@keyframes todo-emoji-bloom { 0% { opacity: 0; transform: scale(.65); } 20%,75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-6px); } }
.note-group-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.note-group-filter > select { flex: 1; min-width: 0; }
.memo-content .note-image-menu { flex: 0 1 100%; min-width: 0; margin: 0; }
.memo-content .note-image-menu > summary { width: fit-content; min-height: 36px; padding: 7px 12px; border: 1px solid var(--ui-hairline); border-radius: var(--ui-radius); color: var(--text); list-style: none; }
.note-image-menu > summary::-webkit-details-marker { display: none; }
.note-image-menu > summary::before { content: '＋'; margin-right: 6px; }
.note-image-menu[open] > summary { color: var(--accent); background: var(--accent-soft); }
.note-card .note-image-options { gap: 10px; margin: 12px 0 6px; }
.note-image-options input[hidden] { display: none; }
.note-groups-dialog { box-sizing: border-box; width: min(640px,calc(100vw - 24px)); }
.note-groups-dialog .note-group-create { display: flex; gap: 10px; margin: 20px 0; }
.note-group-create input,.note-group-row input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
.note-group-create input { flex: 1; width: 0; }
.note-group-create button { flex: 0 0 auto; }
.note-group-list { display: grid; gap: 12px; }
.note-group-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.note-group-row > span { overflow-wrap: anywhere; }
.note-group-row > button,.note-group-create > button { min-height: 44px; }
@media (min-width: 901px) and (max-width: 1250px) { #lifeModule .life-page { padding-inline: 24px; } }
@media (max-width: 620px) {
  .heading-actions { justify-content: flex-start; }
  .heading-actions > .upload-button { min-height: 44px; }
  #lifeModule .life-page { padding-inline: 12px; }
  .memo-content .todo-row { padding: 16px; }
  .todo-main { gap: 8px; }
  .todo-main .remove-button { min-height: 44px; padding-inline: 8px; }
  .note-group-filter { width: 100%; }
  .memo-content .note-group-filter > select { max-width: none; }
  #manageGroups,.memo-content .note-image-menu > summary,.note-image-options > button { min-height: 44px; }
  .note-group-row { grid-template-columns: minmax(0,1fr) auto; }
  .note-group-create input,.note-group-row input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .todo-completion-emoji { animation: none; } }
/* concept-layout.css */
/* Production interpretation of design-preview: proportions, not just palette swaps.
   Loaded after legacy layout; appearance.css remains the final color/radius consumer. */
:root { --desk-rail:202px; --desk-gutter:40px; }
.desk-icon { width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
#globalSearchButton::before { display:none; }
#memoModule .memo-notes-section #newNote { display:none; }
.workspace-heading { padding:32px var(--desk-gutter) 25px; gap:20px; }
.workspace-heading h1 { font:400 37px/1.4 var(--heading-font); letter-spacing:.025em; margin:12px 0 8px; }
.workspace-heading .heading-deck { margin:0; font-size:12px; letter-spacing:.025em; }
.workspace-heading .eyebrow { display:flex; flex-wrap:wrap; align-items:center; gap:20px; font:600 9px/1.6 Arial,sans-serif; letter-spacing:.2em; }
.desk-heading-date { font-size:8px; font-weight:400; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.heading-actions { gap:22px; }
.primary-button,.upload-button { min-height:38px; padding:9px 15px; font-size:12px; }
.heading-save { font-size:10px; }
.heading-save::before { content:'•'; margin-right:6px; color:var(--accent); }
.works-content,.memo-content,.reader-content { padding-inline:var(--desk-gutter); }
.desk-page-footer { margin:28px var(--desk-gutter) 0; padding:20px 0 24px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); font-size:9px; color:var(--muted); }
.desk-page-footer > :first-child { font:8px/1.6 Arial,sans-serif; letter-spacing:.18em; }
.rail-project { min-width:0; margin:38px 4px 0; padding-top:24px; border-top:1px solid var(--line); }
.rail-project .rail-label { font-size:10px; color:var(--muted); margin:0 0 12px; }
.rail-project-title { display:block; width:100%; padding:0; text-align:left; font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.rail-project > p:not(.rail-label) { font-size:10px; color:var(--muted); overflow-wrap:anywhere; line-height:1.8; }
.rail-project > small { display:block; margin-top:15px; padding-top:9px; border-top:3px solid var(--accent-soft); font-size:9px; color:var(--muted); }
@media(min-width:901px) {
  .topbar { padding:33px 22px 22px; gap:0; background:var(--surface-2); backdrop-filter:none; }
  .brand { align-items:center; font-size:14px; gap:10px; }
  .brand small { margin-top:3px; font-size:8px; letter-spacing:.12em; }
  .brand-mark { width:33px; height:39px; border:0; background:var(--accent); color:var(--on-accent); }
  .main-nav { margin:53px -8px 0; gap:9px; }
  .main-nav .nav-item { min-height:45px; padding:10px 14px; gap:13px; border-radius:6px; font-size:13px; font-weight:400; }
  .main-nav .nav-item::before { display:none; }
  .main-nav .nav-item.active { background:var(--accent-soft); color:var(--accent-text); font-weight:600; }
  .main-nav .nav-item.active::after { display:block; content:''; position:static; width:5px; height:5px; margin-left:auto; background:var(--accent); border-radius:50%; }
  .top-actions { padding-top:40px; gap:12px; }
  .top-actions #globalSearchButton { display:flex; align-items:center; gap:8px; width:100%; flex-basis:100%; border-width:0 0 1px; border-radius:0; padding:12px 0; text-align:left; background:transparent; }
  #globalSearchButton kbd { margin-left:auto; font:9px/1.5 Arial,sans-serif; padding:2px 4px; border:1px solid var(--line); }
  .poem-switch { order:1; padding:12px 0; border:0; font-size:12px; }
  #settingsButton { order:2; }
}

/* A landscape and an open desk: 290px daily column / two-column notebook. */
.memo-landscape { height:182px; margin:0 var(--desk-gutter) 30px; position:relative; overflow:hidden; border-radius:var(--skin-radius-lg); background:var(--accent-soft); isolation:isolate; }
.memo-landscape > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; filter:saturate(.58) brightness(1.07); z-index:-2; }
.memo-landscape::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 94%,transparent) 20%,color-mix(in srgb,var(--accent-soft) 44%,transparent) 48%,transparent 80%); }
.landscape-copy { padding:20px 28px; max-width:75%; }
.landscape-copy > span { font:8px/1.5 Arial,sans-serif; letter-spacing:.18em; color:var(--accent-text); }
.landscape-copy h2 { margin:7px 0 6px; font:400 28px/1.5 var(--heading-font); letter-spacing:.08em; }
.landscape-copy p { margin:0; font-size:10px; color:var(--accent-text); }
.landscape-caption { position:absolute; bottom:14px; right:23px; padding:5px 10px; border-radius:3px; background:color-mix(in srgb,var(--surface) 88%,transparent); font-size:9px; }
.landscape-issue { display:none; }
#memoModule .memo-content { display:grid; grid-template-columns:290px minmax(0,1fr); grid-template-rows:auto auto; align-items:start; gap:30px; padding-bottom:0; }
#memoModule .memo-content > .memo-left-column { grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:26px; height:auto; min-height:0; }
#memoModule .memo-content > .memo-notes-section { grid-column:2; grid-row:1; height:auto; min-height:0; overflow:visible; }
#memoModule .memo-content > .memo-statistics-section { grid-column:1/-1; grid-row:2; border-top:1px solid var(--line); padding-top:24px; }
#memoModule .memo-content .memo-section { margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; height:auto; min-height:0; overflow:visible; }
#memoModule .memo-heading { border:0; padding:0; margin-bottom:12px; min-height:32px; gap:8px; }
#memoModule .memo-heading h2 { font:400 20px/1.5 var(--heading-font); letter-spacing:.05em; }
.section-number { display:inline-block; margin-right:7px; font:10px/1.5 Georgia,serif; color:var(--accent-text); vertical-align:middle; }
.section-deck { font-size:11px; color:var(--muted); margin:0 0 16px; }
#memoModule .memo-heading .compact-actions summary,#memoModule #manageGroups { min-height:32px; padding:6px 0; border:0; font-size:10px; color:var(--muted); background:transparent; }
#memoModule #todoForm { flex-wrap:nowrap; gap:5px; padding-bottom:10px; border-bottom:1px solid var(--line); }
#memoModule #todoText { min-width:0; width:100%; padding:7px 0; border:0; background:transparent; font-size:12px; }
#memoModule #todoForm > button { flex:0 0 30px; width:30px; height:30px; min-height:30px; padding:0; font-size:0; background:var(--accent-soft); color:var(--accent-text); }
#memoModule #todoForm > button::before { content:'＋'; font-size:21px; }
#memoModule #todoList,#memoModule #completedList { gap:0; margin-top:0; }
#memoModule .todo-row { padding:15px 0 10px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
#memoModule .todo-row.todo-due { border-left:2px solid var(--accent); padding-left:9px; }
#memoModule .todo-main { gap:9px; }
#memoModule .todo-main input[type=checkbox] { width:16px; height:16px; }
#memoModule .todo-main input[type=text] { padding:3px 0; font-size:13px; }
#memoModule .todo-main .remove-button { border:0; padding:5px 0 5px 6px; font-size:10px; }
#memoModule .todo-settings { margin-top:3px; padding-left:25px; }
#memoModule .todo-settings summary { font-size:10px; color:var(--muted); padding:4px 0; }
#memoModule .todo-settings .todo-time { margin:10px 0 4px; font-size:10px; }
#memoModule #completedTodos { margin-top:12px; }
#memoModule #completedTodos > summary { font-size:10px; color:var(--muted); }
#memoModule #focusStatistics { padding:18px 20px; border-radius:var(--skin-radius-lg); background:var(--accent-soft); }
.desk-focus-heading { display:flex; justify-content:space-between; gap:8px; color:var(--accent-text); font-size:12px; }
.desk-focus-heading > small { font:8px/1.6 Arial,sans-serif; letter-spacing:.08em; }
.desk-focus-summary { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline; margin-top:12px; }
.desk-focus-summary strong { font:400 38px/1.2 Georgia,serif; }
.desk-focus-summary strong small { font:10px/1.5 var(--body-font); color:var(--muted); }
.desk-focus-summary > span { font-size:10px; color:var(--muted); }
#memoModule .desk-focus-history { margin-top:12px; }
.desk-focus-history summary { font-size:10px; color:var(--accent-text); }
.desk-focus-history .records-table { font-size:10px; margin-top:10px; }
#memoModule .memo-notes-section .memo-filters { margin:14px 0 16px; gap:8px; }
.desk-note-tabs { display:flex; gap:18px; flex:1 1 auto; }
.desk-note-tab { padding:6px 0; font-size:11px; color:var(--muted); border-radius:0; border-bottom:1px solid transparent; white-space:nowrap; }
.desk-note-tab[aria-pressed=true] { color:var(--accent-text); border-bottom-color:var(--accent); }
#memoModule .memo-notes-section #noteSearch { flex:0 1 160px; width:160px; min-width:0; padding:6px 0 6px 6px; border-width:0 0 1px; border-radius:0 !important; background:transparent; font-size:11px; }
#memoModule .memo-notes-section .note-group-filter { margin:0; width:auto; }
#memoModule .memo-notes-section .memo-filters select { padding:5px 0; font-size:10px; background:transparent; border:0; max-width:145px; }
#memoModule .memo-notes-section #noteTypeFilter { margin-right:auto; }
#memoModule .notes-rail-heading { margin:0 0 10px; padding:0; }
#memoModule .notes-rail-nav { display:none; }
#memoModule #notesCount { font-size:10px; }
#memoModule #notesGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:row; grid-auto-columns:auto; gap:16px; align-items:start; height:auto; max-height:none; overflow:visible; scroll-snap-type:none; padding:0; }
#memoModule #notesGrid .note-card { width:auto; min-width:0; max-width:none; min-height:250px; height:auto; margin:0; padding:20px 22px 16px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--skin-radius-lg); background:var(--surface); box-shadow:none; transform:none; overflow:visible; }
#memoModule #notesGrid .note-card[data-color=plain][data-note-type=灵感] { background:var(--accent-soft); border-color:transparent; }
#memoModule #notesGrid .note-card[data-color=plain][data-note-type=素材] { background:var(--surface-2); border-color:transparent; }
#memoModule #notesGrid .note-card[data-color=peach] { background:color-mix(in srgb,var(--surface) 82%,#ddaa90); }
#memoModule #notesGrid .note-card[data-color=green] { background:color-mix(in srgb,var(--surface) 82%,#99b6a0); }
#memoModule #notesGrid .note-card[data-color=blue] { background:color-mix(in srgb,var(--surface) 82%,#9bb2cf); }
#memoModule #notesGrid .note-card[data-color=lavender] { background:color-mix(in srgb,var(--surface) 82%,#b4a0c9); }
#memoModule #notesGrid .note-card[data-color=yellow] { background:color-mix(in srgb,var(--surface) 82%,#d8c584); }
.desk-note-meta { display:flex; justify-content:space-between; gap:10px; font-size:10px; color:var(--muted); margin-bottom:10px; }
.desk-note-meta > :last-child { font:8px/1.6 Georgia,serif; letter-spacing:.1em; }
#memoModule #notesGrid input.note-title { padding:0 0 7px; background:transparent; border:0; font:400 21px/1.5 var(--heading-font); }
#memoModule #notesGrid textarea.note-body { min-height:112px; max-height:none; padding:0; margin:4px 0 10px; background:transparent; border:0; border-radius:0; font-size:13px; line-height:1.9; resize:vertical; }
#memoModule #notesGrid .rich-editor { width:100%; min-height:96px; max-height:none; padding:0; margin:4px 0 10px; background:transparent; border:0; border-radius:0; font-size:13px; line-height:1.9; overflow-wrap:anywhere; }
#memoModule #notesGrid .rich-editor:focus { outline:1px dashed var(--line); outline-offset:5px; }
#memoModule #notesGrid .rich-editor p { margin:0 0 .5em; }
#memoModule #notesGrid .rich-editor img { max-width:100%; height:auto; }
#memoModule #notesGrid .desk-note-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; align-items:baseline; margin-top:auto; padding-top:8px; }
#memoModule #notesGrid .note-settings { margin:0; padding:0; border:0; }
#memoModule #notesGrid .note-settings[open] { flex-basis:100%; }
#memoModule #notesGrid .note-settings p[id^=note-time] { font-size:9px; }
#memoModule #notesGrid .note-settings summary,#memoModule #notesGrid .note-insert summary { font-size:10px; color:var(--muted); }
#memoModule #notesGrid .note-insert { margin:0; }
#memoModule #notesGrid .note-card > p[id^=note-time] { margin:10px 0 0; font-size:9px; color:var(--muted); }
.desk-note-tags { font-size:10px; color:var(--accent-text); }
.desk-library-caption { font-size:9px; color:var(--muted); margin:14px 0 0; }

/* The collection is a shelf, not two 620px-tall empty boxes. */
#worksModule .works-content { grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr); gap:28px 30px; }
#worksModule .desk-feature { min-height:210px; grid-template-columns:1fr; border-radius:var(--skin-radius-lg); background:var(--accent-soft); color:var(--text); }
#worksModule .desk-feature::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 80%,transparent) 35%,transparent 85%),url('assets/landscape.jpg') center 48%/cover; opacity:.9; }
#worksModule .feature-copy { padding:22px 28px 52px; max-width:75%; }
#worksModule .feature-copy .eyebrow,#worksModule .feature-copy > p:not(.eyebrow) { color:var(--accent-text); }
#worksModule .feature-copy h2 { margin:10px 0 6px; font-size:32px; color:var(--text); }
#worksModule .feature-copy .primary-button { margin-top:14px; min-width:124px; min-height:36px; padding:8px 14px; background:var(--accent); color:var(--on-accent); }
#worksModule .feature-art { display:none; }
#worksModule .feature-foot { bottom:0; padding:9px 28px; font-size:9px; color:var(--accent-text); background:color-mix(in srgb,var(--surface) 72%,transparent); border:0; }
#worksModule .works-content > .works-section { height:auto; min-height:0; padding:22px 0 0; border:0; border-radius:0; box-shadow:none; background:transparent; border-top:1px solid var(--line); overflow:visible; }
#worksModule .works-section h2 { margin:0 0 20px; font:400 23px/1.5 var(--heading-font); }
#worksModule .section-kicker { font-size:8px; margin-bottom:8px; }
#worksModule .collection-section .works-grid { height:auto; overflow:visible; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:24px; }
#worksModule .work-card { height:auto; min-height:0; }
#worksModule .work-open { flex:none; }
#worksModule .work-open img,#worksModule .cover-placeholder { height:200px; font-size:18px; }
#worksModule .desk-stats .stat-card { padding:12px 0; }
#worksModule .desk-stats .stat-card strong { font:400 23px/1.4 var(--heading-font); }
#worksModule .desk-stats .muted { font-size:10px; }
#worksModule .project-workbench { border-top:1px solid var(--line); }

/* One restrained editorial system for the remaining tools. */
#writeModule .workspace-heading { padding:28px var(--desk-gutter) 20px; }
#writeModule .workspace-heading h1 { font-size:29px; }
#writeModule .writing-layout { margin-inline:var(--desk-gutter); }
#writeModule .editor-panel { border:1px solid var(--line); border-radius:var(--skin-radius-md); background:var(--surface); }
#writeModule .editor-toolbar { background:transparent; }
#writeModule .editor,#writeModule .title-input { background:transparent; }
#writeModule #pomodoroPanel { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:8px 20px; margin:0 var(--desk-gutter) 24px; padding:16px 0; border-width:1px 0; border-radius:0; background:transparent; }
#writeModule #pomodoroPanel > h3 { font:400 14px/1.5 var(--heading-font); margin:0; }
#writeModule #pomodoroClock { font:400 27px/1.5 Georgia,var(--body-font); margin:0; white-space:nowrap; }
#writeModule #pomodoroSummary { margin:0; font-size:11px; }
#writeModule #pomodoroPanel > .tools-bar { gap:6px; }
#writeModule #pomodoroPanel > .tools-bar button { min-height:34px; padding:6px 12px; }
#writeModule #pomodoroPanel > .timer-help { grid-column:1/4; margin:0; font-size:10px; }
#writeModule #pomodoroPanel > details { margin:0; font-size:11px; text-align:right; }
#writeModule #pomodoroPanel > details[open] { grid-column:1/-1; text-align:left; }
.desk-stat-overview { display:grid; grid-template-columns:290px minmax(0,1fr); gap:30px; align-items:start; }
.desk-stat-intro,.desk-stat-visual { min-width:0; }
#memoModule .desk-stat-intro #newTemplate { min-height:30px; padding:5px 8px; font-size:10px; }
#memoModule .desk-stat-intro #datasetSelect { max-width:170px; font-size:11px; border:0; background:transparent; padding:6px 4px; }
#memoModule .desk-stat-intro .memo-more summary { font-size:10px; }
#memoModule .desk-stat-intro .auto-record-controls { margin-top:12px; font-size:10px; }
#memoModule .desk-stat-intro .auto-record-hint { display:none; }
#memoModule .desk-stat-intro #recordSummary { display:flex; gap:8px 16px; padding:12px 0; }
#memoModule .desk-stat-intro #recordSummary span { border:0; background:transparent; padding:0; font-size:11px; border-radius:0; }
#memoModule .desk-stat-visual .memo-filters { margin:0 0 12px; gap:8px; }
#memoModule .desk-stat-visual .memo-filters :is(select,input) { padding:5px 7px; font-size:11px; }
#memoModule .desk-stat-visual input[type=date]:disabled { display:none; }
#memoModule .desk-stat-visual #recordChart { min-height:90px; }
#memoModule .desk-stat-visual #recordChart svg { max-height:170px; }
#memoModule .desk-stat-visual > p { font-size:9px; margin:8px 0; }
#memoModule .desk-record-composer { margin:16px 0; border-block:1px solid var(--line); padding:12px 0; }
#memoModule .desk-record-composer > summary { font-size:11px; color:var(--accent-text); min-height:28px; }
#memoModule #recordList { margin-top:12px; font-size:11px; }
#readerModule #readerShelf { background:transparent; padding:0; border:0; box-shadow:none; border-radius:0; }
#readerModule #readerShelf #readerSearch { background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:var(--skin-radius-md) !important; backdrop-filter:none; box-shadow:none; padding:12px 16px; }
#readerModule .reader-book { background:transparent; border:0; box-shadow:none; }
#lifeModule .reward-card { background:var(--surface); box-shadow:none; border-radius:var(--skin-radius-md); }
#lifeModule .reward-claim { min-height:210px; padding:22px; }

/* Three art directions, in addition to their independent semantic palettes. */
html[data-skin=editorial] .topbar { background:var(--bg); }
html[data-skin=editorial] .brand-mark { background:transparent; border:1px solid var(--text); color:var(--text); }
html[data-skin=editorial] .workspace-heading h1 { font-weight:700; letter-spacing:-.04em; }
html[data-skin=editorial] .memo-landscape { border-top:3px solid var(--text); border-bottom:1px solid var(--text); background:transparent; }
html[data-skin=editorial] .memo-landscape > img,html[data-skin=editorial] .memo-landscape::before { display:none; }
html[data-skin=editorial] .landscape-copy { padding-left:0; }
html[data-skin=editorial] .landscape-copy h2 { font-weight:700; letter-spacing:-.04em; font-size:34px; }
html[data-skin=editorial] .landscape-issue { position:absolute; display:flex; align-items:center; gap:24px; right:20px; top:4px; }
html[data-skin=editorial] .landscape-issue small { writing-mode:vertical-rl; letter-spacing:.18em; font:9px/1.5 Arial,sans-serif; }
html[data-skin=editorial] .landscape-issue strong { font:400 156px/1 Georgia,serif; letter-spacing:-.08em; }
html[data-skin=editorial] #memoModule #notesGrid .note-card[data-color=plain] { border-width:1px 0 0; border-color:var(--text); background:transparent; padding-inline:0; }
html[data-skin=editorial] #worksModule .desk-feature { border-block:3px solid var(--text); background:transparent; }
html[data-skin=editorial] #worksModule .desk-feature::before { display:none; }
html[data-skin=editorial] #worksModule .feature-copy { padding-left:0; }
html[data-skin=editorial] #worksModule .feature-foot { padding-inline:0; background:transparent; }
html[data-skin=night] .topbar { background:color-mix(in srgb,var(--bg) 90%,black); }
html[data-skin=night] .memo-landscape > img { filter:saturate(.35) brightness(.55); }
html[data-mode=night] .memo-landscape::before { background:linear-gradient(90deg,var(--surface),color-mix(in srgb,var(--surface) 94%,transparent) 20%,color-mix(in srgb,var(--surface) 40%,transparent) 60%,transparent); }
html[data-mode=night] #worksModule .desk-feature::before { background:linear-gradient(90deg,var(--surface),color-mix(in srgb,var(--surface) 84%,transparent) 45%,transparent),url('assets/landscape.jpg') center 48%/cover; filter:brightness(.65); }
html[data-mode=night] #worksModule .feature-copy,html[data-mode=night] #worksModule .feature-foot { color:var(--text); }
html[data-skin=night] #memoModule #notesGrid .note-card { border-top:2px solid color-mix(in srgb,var(--accent) 45%,var(--line)); }

@media(min-width:901px) and (max-width:1200px) {
  :root { --desk-rail:174px; --desk-gutter:28px; }
  .topbar { padding-inline:16px; }
  .brand { font-size:12px; gap:8px; }
  .brand small { font-size:7px; }
  #memoModule .memo-content { grid-template-columns:225px minmax(0,1fr); gap:24px; }
  #memoModule #notesGrid .note-card { padding:18px; }
  .desk-note-tabs { gap:12px; flex-basis:100%; }
}
@media(max-width:900px) {
  :root { --desk-gutter:22px; }
  .rail-project { display:none; }
  .brand .brand-mark { border-radius:3px; }
  .main-nav .desk-icon { display:none; }
  #globalSearchButton > span,#globalSearchButton kbd { display:none; }
  #globalSearchButton { display:grid; place-items:center; }
  .workspace-heading h1 { font-size:32px; }
  .desk-heading-date { display:none; }
  #memoModule .memo-content { grid-template-columns:220px minmax(0,1fr); gap:24px; }
  #memoModule #notesGrid { grid-template-columns:minmax(0,1fr); }
  #worksModule .works-content { grid-template-columns:minmax(0,1fr); }
  #worksModule .works-content > .works-section { grid-column:1; grid-row:auto; }
  #writeModule #pomodoroPanel { grid-template-columns:auto 1fr auto; }
  #writeModule #pomodoroSummary { grid-column:1/3; grid-row:2; }
  #writeModule #pomodoroPanel > .tools-bar { grid-column:3; grid-row:1/3; }
  #writeModule #pomodoroPanel > .timer-help { grid-column:1/-1; }
  #writeModule #pomodoroPanel > details { grid-column:1/-1; text-align:left; }
}
@media(max-width:620px) {
  .topbar { padding-inline:18px; }
  .workspace-heading,#writeModule .workspace-heading { padding:25px var(--desk-gutter) 20px; }
  .workspace-heading h1 { font-size:29px; }
  .workspace-heading .heading-deck { font-size:11px; }
  .heading-actions { gap:14px; }
  .memo-landscape { height:164px; margin-bottom:25px; }
  .memo-landscape > img { object-position:66% center; }
  .memo-landscape::before { background:linear-gradient(90deg,color-mix(in srgb,var(--accent-soft) 96%,transparent),color-mix(in srgb,var(--accent-soft) 65%,transparent) 58%,transparent); }
  .landscape-copy { padding:18px 20px; max-width:90%; }
  .landscape-copy h2 { font-size:25px; }
  .landscape-caption { right:12px; bottom:9px; font-size:8px; }
  #memoModule .memo-content { display:flex; flex-direction:column; gap:26px; }
  #memoModule .memo-content > .memo-left-column,#memoModule .memo-content > .memo-section { width:100%; }
  #memoModule .memo-content > .memo-left-column { gap:20px; }
  #memoModule .memo-content #focusStatistics { padding:16px 20px; }
  #memoModule .memo-filters .desk-note-tabs { flex-basis:100%; justify-content:space-between; gap:8px; }
  #memoModule .memo-notes-section #noteSearch { flex:1 1 100%; width:100%; padding:9px 0; font-size:12px; }
  #memoModule .memo-notes-section .note-group-filter { width:auto; flex:1; }
  #memoModule #notesGrid .note-card { min-height:0; padding:18px 20px; }
  #memoModule #notesGrid input.note-title { font-size:20px; }
  #memoModule #notesGrid textarea.note-body,#memoModule #notesGrid .rich-editor { font-size:14px; }
  #memoModule #todoForm > button { flex-basis:44px; width:44px; height:44px; }
  #memoModule .todo-main .remove-button,#memoModule .todo-settings summary,#memoModule #completedTodos > summary,#memoModule .desk-focus-history summary { min-height:36px; }
  #memoModule .desk-note-tab { min-height:44px; }
  #memoModule #notesGrid .note-settings summary,#memoModule #notesGrid .note-insert summary { min-height:36px; padding-block:8px; }
  #memoModule #manageGroups { min-height:44px; }
  #worksModule .desk-feature { min-height:210px; }
  #worksModule .feature-copy { padding:22px 20px 52px; max-width:100%; }
  #worksModule .feature-copy h2 { font-size:28px; }
  #worksModule .feature-foot { padding-inline:20px; }
  #worksModule .collection-section .works-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }
  #worksModule .work-open img,#worksModule .cover-placeholder { height:180px; }
  #worksModule .desk-stats .stat-card strong { font-size:21px; }
  #writeModule .writing-layout { margin-inline:12px; }
  #writeModule .editor-toolbar > div:first-child { flex:0 0 100%; }
  #writeModule .editor-toolbar > div:first-child > .muted { white-space:nowrap; }
  #writeModule .writing-controls { width:100%; margin-left:0; justify-content:space-between; gap:4px; }
  #writeModule .writing-controls :is(#directoryToggle,#resourceToggle,.writing-more > summary) { min-height:44px; padding-inline:6px; }
  #writeModule #pomodoroPanel { gap:8px 12px; }
  #writeModule #pomodoroPanel > h3 { font-size:12px; }
  #writeModule #pomodoroClock { font-size:22px; }
  #writeModule #pomodoroPanel > .tools-bar { grid-column:1/-1; grid-row:3; }
  #writeModule #pomodoroPanel > .tools-bar button { min-height:44px; }
  #writeModule #pomodoroPanel > .timer-help { grid-row:4; }
  .desk-stat-overview { grid-template-columns:minmax(0,1fr); gap:18px; }
  #memoModule .desk-record-composer > summary { min-height:44px; padding-block:10px; }
  .desk-page-footer { font-size:8px; }
  html[data-skin=editorial] .landscape-copy h2 { font-size:26px; }
  html[data-skin=editorial] .landscape-issue { right:8px; top:30px; opacity:.15; z-index:-1; }
  html[data-skin=editorial] .landscape-issue strong { font-size:100px; }
  html[data-skin=editorial] .landscape-issue small { display:none; }
}
@media(prefers-reduced-motion:reduce) { .note-card { transition:none; } }
/* appearance.css */
/* Final token consumers. Reading content and user-colored notes keep their own controls. */
html, body { background-color: var(--bg); }
body { font-size: var(--ui-font-size, 14px); }
input, textarea, select { accent-color: var(--accent); }
.settings-drawer { width: min(430px, 100vw); background: var(--surface); color: var(--text); }
.settings-content { padding: 24px; }
.appearance-hint { margin: 10px 0 16px; font-size: .85em; line-height: 1.7; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.appearance-settings h3 { font-size: 1.05em; font-weight: 600; }
.appearance-settings .theme-grid { grid-template-columns: 1fr; gap: 10px; }
.appearance-settings .theme-option {
  display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 4px 12px; align-items: center;
  min-height: 76px; padding: 14px; border: 1px solid var(--line); border-radius: var(--skin-radius-md);
  background: var(--theme-bg); color: var(--theme-text); font-size: .95em;
}
.appearance-settings .theme-option:hover { background: var(--theme-bg); border-color: var(--accent); }
.appearance-settings .theme-option strong { font-weight: 600; }
.appearance-settings .theme-option small { grid-column: 2; line-height: 1.5; }
.appearance-settings .swatch { display: block; grid-row: 1 / 3; width: 24px; height: 32px; margin: 0; border-radius: 3px; background: var(--theme-accent); }
.appearance-modes { display: flex; gap: 8px; margin-bottom: 20px; }
.appearance-modes button { flex: 1; min-height: 44px; font-size: .95em; }
.appearance-modes [aria-pressed=true] { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.appearance-settings .custom-colors { margin: 0 0 18px; font-size: .95em; }
.appearance-accent { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.appearance-settings input[type=color] { width: 40px; height: 32px; cursor: pointer; }
.appearance-settings .hex-color { width: 100px !important; min-height: 36px; padding: 6px; border: 1px solid var(--line); background: var(--bg); }
.appearance-advanced { border-block: 1px solid var(--line); padding-block: 14px; }
.appearance-advanced summary { cursor: pointer; min-height: 32px; font-size: .95em; }
.appearance-advanced > label { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-block: 12px; }
#appearanceContrast[data-warning=true] { color: var(--text); font-weight: 600; }
.appearance-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.appearance-controls .field-label { font-size: .85em; }
.appearance-controls select { min-height: 44px; padding: 7px 4px; font-size: 1em; }
#resetAppearance { min-height: 44px; font-size: .95em; }
.primary-button, .small-button, .upload-button { background: var(--accent); color: var(--on-accent); }
button:is(.primary-button,.small-button):hover:not(:disabled), .upload-button:hover { background: var(--accent); color: var(--on-accent); filter: brightness(.94); }
.secondary-upload { background: var(--surface-2); color: var(--text); }
.eyebrow, .section-kicker, .outline-button, .remove-button, .project-tab.active, .chapter-item.active { color: var(--accent-text); }
:is(.theme-option,.nav-item,.outline-button,.small-button,.primary-button,.upload-button,.task-more-actions,.writing-more-actions,.reader-book-menu-body,.chapter-item,.resource-card,.font-library-item,.background-card,.shelf-chip,.shelf-segment,.life-tabs button) { border-radius: var(--skin-radius-md); }
:is(.works-section,.memo-section,.life-card,.task-card,.note-card,.reader-layout,.reader-toolbar,.reader-controls,.tools-dialog,.chapter-dialog,.desk-feature,.record-history) { border-radius: var(--skin-radius-lg); }
.works-content > .works-section,.memo-content > .memo-section { border-radius: var(--skin-radius-lg); padding: var(--appearance-space); }
#writeModule .editor-panel { border-radius: var(--skin-radius-lg); background: var(--surface); }
.life-grid .life-card,.life-page form.life-card,.life-page form.life-card ~ article.life-card,.diary-book,.reward-card { border-radius: var(--skin-radius-lg); }
body[data-background=true] #writeModule .editor-panel { background: transparent; }
:is(.works-content,.memo-content,.memo-upper-grid,.memo-left-column,.reader-books,.project-brief-form) { gap: var(--appearance-space); }
:is(.life-card,.memo-section,.task-card) { padding: var(--appearance-space); }
.desk-feature { --desk-dark: var(--surface-2); --desk-light: var(--text); border: 1px solid var(--line); }
.feature-copy .primary-button { background: var(--accent); color: var(--on-accent); border-radius: var(--skin-radius-md); }
.feature-foot { border-top-color: var(--line); color: var(--muted); }
.feature-copy .eyebrow,.feature-copy > p:not(.eyebrow),.art-caption { color: var(--muted); }
.art-book { background: var(--surface); color: var(--text); box-shadow: 12px 16px 28px #0002, inset 6px 0 0 var(--line); }
.art-orbit,.art-orbit::after { border-color: var(--line); }
.reading-chat-bubble { color: var(--bubble-text,var(--text)); }
.reading-chat-right .reading-chat-bubble { background: var(--bubble-bg,var(--accent-soft)) !important; }
html[data-mode=night] .reading-chat-bubble { color: var(--bubble-text,var(--text)); }
#readerShelf #readerSearch { border-radius: var(--skin-radius-lg) !important; }
html[data-skin=paper] .desk-feature { --desk-dark: #293d31; --desk-light: #f3f0e8; }
html[data-skin=paper] .feature-copy .eyebrow,html[data-skin=paper] .feature-copy > p:not(.eyebrow),html[data-skin=paper] .art-caption,html[data-skin=paper] .feature-foot { color: #ced7c5; }
html[data-skin=paper] .feature-copy .primary-button { background: #e3e8d6; color: #293d31; }
html[data-skin=editorial] :is(.works-section,.memo-section,.life-card,.task-card,.editor-panel) { box-shadow: none; border: 1px solid var(--line); }
html[data-skin=editorial] :is(.workspace-heading h1,.works-section h2) { font-weight: 700; letter-spacing: -.035em; }
html[data-skin=editorial] .desk-feature { border-block: 3px solid var(--text); }
html[data-skin=editorial] .capsule-editor { background: var(--surface) !important; }
html[data-skin=night] .desk-feature { border-top: 2px solid var(--accent); }
html[data-skin=night] .art-book { background: var(--accent-soft); color: var(--accent-text); }
html[data-mode=night] :is(.works-section,.memo-section,.life-card,.task-card) { background-color: var(--surface); }
html[data-mode=night] .capsule-editor { background: var(--surface) !important; }

/* Scale interface text without touching the independently sized reading article. */
html:not([data-text-size=standard]) :is(.nav-item,.outline-button,.small-button,.primary-button,.poem-switch,.field-label,.book-picker,.chapter-item,.tree-name,.resource-row,.task-card,.memo-filters,.life-tabs button,.reader-book-menu-body,.setting-hint) { font-size: var(--ui-font-size); }
html:not([data-text-size=standard]) :is(.settings-content,.toolbar-actions,.project-field,.task-toolbar,.memo-heading,.note-card) :is(input,select,textarea,button,label) { font-size: var(--ui-font-size); }
html[data-text-size=large] #editor { font-size: 19px; }
html[data-text-size=larger] #editor { font-size: 21px; }
html[data-text-size=large] .workspace-heading h1 { font-size: clamp(30px,3.5vw,48px); }
html[data-text-size=larger] .workspace-heading h1 { font-size: clamp(32px,3.8vw,50px); }
html:not([data-density=standard]) :is(.nav-item,.outline-button,.small-button,.primary-button,.task-more summary,.writing-more summary) { min-height: var(--ui-control-height); }
html[data-density=compact] :is(.resource-row,.tree-name,.project-tab) { padding-block: 5px; }
html[data-density=relaxed] :is(.resource-row,.tree-name,.project-tab) { padding-block: 12px; }
@media (max-width:900px) {
  html:not([data-text-size=standard]) .topbar { grid-template-columns: auto minmax(0,1fr); }
  .appearance-controls { gap: 8px; }
}
@media (max-width:620px) {
  .settings-content { padding: 20px; }
  html:not([data-text-size=standard]) .poem-switch { font-size: 12px; }
  html:not([data-text-size=standard]) .main-nav { flex-wrap: nowrap; overflow-x: auto; }
  html:not([data-density=standard]) :is(.main-nav .nav-item,.outline-button,.small-button,.primary-button) { min-height: 44px; }
  :is(.works-content,.memo-content,.memo-upper-grid,.memo-left-column) { gap: min(var(--appearance-space),20px); }
  .works-content > .works-section,.memo-content > .memo-section { padding: min(var(--appearance-space),20px); }
}
@media (prefers-reduced-motion:reduce) {
  html,body { transition: none; }
}
}
}

@layer reader-native { @scope (#readerPanel) {
.reader-fullscreen-open { overflow:hidden; }
#readerPanel.reader-fullscreen { position:fixed; inset:0; z-index:900; width:100%; height:100vh; height:100dvh; padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); background:var(--surface); display:flex; flex-direction:column; overflow:hidden; }
.reader-fullscreen .reader-toolbar,.reader-fullscreen .reader-controls { flex-shrink:0; margin-bottom:6px; padding:6px 10px; }
.reader-fullscreen .reader-layout { display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden; }
.reader-fullscreen .reader-directory,.reader-fullscreen .reader-hint { display:none; }
.reader-fullscreen .reader-main { display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden; }
.reader-fullscreen #readingViewport { flex:1 1 0; height:auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y pinch-zoom; -webkit-overflow-scrolling:touch; }
.reader-fullscreen .reader-pagination { flex-shrink:0; padding:8px 12px; }
.reader-fullscreen #readerFullscreen { min-height:44px; }
.pdf-text-layer { position:absolute; inset:0; overflow:hidden; line-height:1; text-align:initial; }.pdf-text-layer span { color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0 0; }.pdf-text-layer ::selection { background:#7a9aba66; }#pdfStage { position:relative; margin:20px auto; }#pdfStage #pdfCanvas { margin:0; }
.reader-content { max-width:1500px; margin:auto; padding:0 46px 45px; }.reader-books { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:22px; }.reader-book { border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; transition:transform .2s,box-shadow .2s; }.reader-book:hover { transform:translateY(-3px); box-shadow:0 9px 25px #00000014; }.reader-book-open { display:block; width:100%; padding:16px; text-align:left; }.reader-cover { height:245px; width:100%; object-fit:cover; border-radius:8px; }.reader-cover-art { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px; padding:25px; background:linear-gradient(145deg,var(--surface-2),var(--accent-soft)); color:var(--accent); text-align:center; font-family:var(--heading-font); }.reader-cover-art strong { font-size:23px; line-height:1.6; overflow-wrap:anywhere; }.reader-cover-art span { font-size:11px; letter-spacing:4px; }.reader-book h3 { font-family:var(--heading-font); overflow-wrap:anywhere; }.reader-book p { margin:7px 0; font-size:12px; color:var(--muted); }.reader-book-actions { display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 16px; }.reader-book-actions select { max-width:100%; border:1px solid var(--line); padding:6px; border-radius:8px; background:var(--bg); }.reader-meter { height:3px; background:var(--line); margin:10px 0; }.reader-meter span { height:100%; display:block; background:var(--accent); }
.reader-toolbar,.reader-controls { padding:14px 18px; background:var(--surface); border:1px solid var(--line); border-radius:8px; margin-bottom:12px; }.reader-toolbar strong { flex:1; }.reader-controls label { display:flex; align-items:center; gap:6px; font-size:12px; }.reader-controls input { width:100px; }.reader-controls select { padding:6px; border:1px solid var(--line); background:var(--bg); border-radius:8px; max-width:180px; }.reader-layout { display:grid; grid-template-columns:220px minmax(0,1fr); border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }.reader-directory { padding:20px 14px; border-right:1px solid var(--line); max-height:82vh; overflow:auto; }.reader-directory h3 { font-size:13px; margin:0 8px 15px; }.reader-directory button { display:block; padding:11px 10px; width:100%; text-align:left; font-size:13px; border-radius:8px; overflow-wrap:anywhere; }.reader-directory button.active { background:var(--accent-soft); color:var(--accent); }.reader-main { min-width:0; background:var(--reader-paper,var(--surface)); color:var(--text); }.reader-main[data-paper=cream] { --reader-paper:#f7f1e6; }.reader-main[data-paper=sage] { --reader-paper:#ecf1e8; }.reader-main[data-paper=gray] { --reader-paper:#eeeeeb; }body[data-mode=night] .reader-main[data-paper] { --reader-paper:var(--surface); }
#readingViewport { height:68vh; min-height:350px; overflow:auto; scroll-behavior:auto; position:relative; }#readingPage { max-width:820px; margin:auto; padding:48px 60px 65px; font-family:var(--reader-font,var(--body-font)); font-size:var(--reader-size,19px); line-height:var(--reader-line,1.95); overflow-wrap:anywhere; }.reader-pagination { display:flex; align-items:center; justify-content:space-between; padding:17px 25px; border-top:1px solid var(--line); }.reader-hint { padding:0 25px; font-size:11px; }.reading-chap { text-align:center; font-family:var(--heading-font); font-weight:500; font-size:1.8em; margin:20px 0 18px; line-height:1.55; letter-spacing:.08em; }.reading-chap::after { content:''; display:block; width:50px; height:1px; background:var(--accent); margin:24px auto; }.reading-title { text-align:center; font-family:var(--heading-font); font-size:1.18em; color:var(--accent); letter-spacing:.14em; font-weight:400; margin:0 0 28px; }.reading-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:20px 0; }.reading-chip { border-radius:30px; background:var(--accent-soft); color:var(--accent); font-size:.65em; padding:4px 13px; letter-spacing:.03em; }.reading-cp .reading-chip { border:1px solid var(--line); background:var(--surface-2); }.reading-location { text-align:center; color:var(--muted); font-size:.75em; margin:18px 0 28px; }.reading-preface { border-left:3px solid var(--accent); padding:15px 24px; margin:30px 0 38px; background:color-mix(in srgb,var(--accent-soft) 40%,transparent); font-style:italic; font-size:.9em; color:var(--muted); line-height:1.9; }.reading-paragraph { text-indent:2em; margin:0 0 1.25em; white-space:pre-wrap; }.reading-inner { font-style:italic; color:var(--muted); }.reading-comment { font-size:.83em; border-left:2px solid var(--line); padding:12px 20px; margin:25px 0; color:var(--muted); background:var(--surface-2); }.reading-divider { border:0; border-top:1px solid var(--line); margin:40px auto; width:60%; }.reading-image { max-width:100%; display:block; margin:25px auto; border-radius:8px; }.reader-page-mode #readingViewport { overflow-x:hidden; }.reader-page-mode #readingPage { max-width:none; height:100%; margin:0; padding:35px; column-gap:70px; column-fill:auto; }.reader-page-mode .reading-chap { break-after:avoid; }.reader-page-mode .reading-preface,.reader-page-mode .reading-image { break-inside:avoid; }#pdfCanvas { display:block; max-width:100%; height:auto; margin:20px auto; }#pdfFallback { padding:25px; }#pdfFallback iframe { width:100%; height:55vh; border:0; }.reader-book-open:focus-visible { outline:2px solid var(--accent); }
@media(max-width:800px) { .reader-content { padding:0 12px 30px; }.reader-layout { grid-template-columns:150px minmax(0,1fr); }#readingPage { padding:25px; }.reader-toolbar,.reader-controls { padding:12px; } }
@media(max-width:550px) { .reader-layout { display:block; }.reader-directory { max-height:150px; border-right:0; border-bottom:1px solid var(--line); }.reader-directory h3 { margin-bottom:7px; }#readerToc { display:flex; gap:5px; flex-wrap:wrap; }#readerToc button { width:auto; max-width:100%; padding:7px; }#readingViewport { height:65vh; }.reader-books { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); }.reader-cover { height:205px; }.reader-cover-art strong { font-size:19px; } }
} }