:root{color-scheme:light dark;--bg:#f6f7f2;--paper:#fff;--ink:#2a352e;--muted:#69776e;--line:#dee5dd;--green:#376955}@media(prefers-color-scheme:dark){:root{--bg:#19221d;--paper:#202c24;--ink:#e3ebe5;--muted:#a5b3a9;--line:#3b4b40;--green:#a0d0b4}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:740px;margin:auto;padding:24px 20px 64px}header,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}header>a{font-size:24px;font-weight:600}nav{display:flex;gap:18px;font-size:13px}a{color:var(--green);text-decoration:none}h1{font-size:28px;margin:28px 0 4px}h2{font-size:18px}.intro,#status,#sync-status,small{color:var(--muted);font-size:13px}form{padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:16px;margin:24px 0}label{display:block;font-size:13px;color:var(--muted);margin-bottom:18px}input,textarea,select{display:block;width:100%;padding:12px 14px;margin-top:8px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:16px/1.8 inherit;min-height:48px}input,textarea,select,button{font-family:inherit;font-size:16px}textarea{resize:vertical;line-height:1.8}input:focus,textarea:focus,select:focus{outline:2px solid var(--green);outline-offset:2px}button{border:0;border-radius:9px;padding:11px 17px;cursor:pointer;background:var(--green);color:var(--bg)}button:disabled{opacity:.5}summary{cursor:pointer;font-size:13px;color:var(--muted);margin:12px 0}article{padding:18px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}article strong,article small{display:block}article p{white-space:pre-wrap}article button,article a{font-size:13px;margin-top:12px}details p{max-height:260px;overflow:auto}input[type=hidden]{display:none}@media(max-width:420px){form{padding:20px 16px}main{padding:18px 16px 48px}}

fieldset{border:0;padding:0;margin:0;min-width:0}

:root{--background:var(--bg);--surface:var(--paper);--foreground:var(--ink);--border:var(--line);--accent:var(--green);--accent-soft:color-mix(in srgb,var(--green) 12%,var(--paper));--surface-muted:var(--bg);--danger:#b4424a;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
main{max-width:1100px}.journal-writing-field{margin:22px 0}.writing-label-row>label{margin:0}.writing-canvas textarea{margin:0}.writing-canvas button{font-family:inherit}.writing-canvas [hidden]{display:none!important}.writing-editor-slot textarea{width:100%}.writing-outline ol{list-style:none;padding:0;margin:0}.writing-format-tools .writing-tool,.writing-view-tools .writing-tool,.writing-expand{color:var(--muted);background:transparent}.field-error{color:var(--danger);font-size:13px}.journal-content{color:var(--ink)}

.journal-writing-field { min-width: 0; scroll-margin-top: 22px; }
.writing-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.writing-label-row .label { margin: 0; }
.writing-expand { padding: 4px 0 4px 10px; border: 0; background: transparent; color: var(--accent); font-size: 12px; }
.writing-canvas { min-width: 0; }
.writing-textarea { line-height: 1.95; font-size: 15px; }
.writing-textarea[hidden] { display: none; }
.writing-codemirror[hidden], .writing-editor-slot[hidden], .writing-body > [hidden], .writing-tools[hidden], .writing-bottom[hidden], .writing-preview[hidden], .writing-tool[hidden], .writing-enable[hidden], .writing-outline[hidden] { display: none !important; }
.is-expanded > .writing-canvas { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); overflow: clip; }
.is-expanded > .writing-canvas:focus-within { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); }
.is-expanded .writing-textarea { border: 0; border-radius: 0; background: transparent; padding: 22px 24px; min-height: 240px; box-shadow: none; resize: vertical; }
.writing-tools { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-muted) 50%, var(--surface)); }
.writing-format-tools, .writing-view-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.writing-tool-divider { height: 18px; margin: 0 5px; border-left: 1px solid var(--border); }
.writing-tool, .writing-enable { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 11px; white-space: nowrap; }
.writing-tool:hover, .writing-tool[aria-pressed="true"], .writing-enable:hover { color: var(--accent); background: var(--accent-soft); }
.writing-enable { color: var(--accent); font-size: 12px; }
.writing-bottom { padding: 10px 16px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--background) 45%, var(--surface)); }
.writing-bottom > p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 14px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.writing-bottom > p > span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.writing-capture-controls { margin-top: 8px; }
.writing-preview { min-height: 240px; padding: 22px 24px; overflow-wrap: anywhere; }
.writing-body { min-width: 0; }
.writing-body.is-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.writing-body.is-split > .writing-preview { border-left: 1px solid var(--border); background: color-mix(in srgb, var(--background) 40%, var(--surface)); max-height: 600px; overflow: auto; }
.writing-editor-slot { position: relative; min-width: 0; }
.writing-codemirror .cm-editor { background: transparent; color: var(--foreground); font-size: 15px; }
.writing-codemirror .cm-editor.cm-focused { outline: 0; }
.writing-codemirror .cm-scroller { min-height: 240px; max-height: 600px; overflow: auto; font-family: inherit; line-height: 1.95; }
.writing-codemirror .cm-content { min-height: 240px; padding: 18px 0; caret-color: var(--accent); }
.writing-codemirror .cm-line { padding: 0 18px; }
.writing-codemirror .cm-gutters { border: 0; background: color-mix(in srgb, var(--surface-muted) 40%, var(--surface)); color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.writing-codemirror .cm-lineNumbers .cm-gutterElement { padding: 0 6px 0 8px; }
.writing-codemirror .cm-activeLine, .writing-codemirror .cm-activeLineGutter { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.writing-codemirror .cm-selectionBackground, .writing-codemirror .cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground { background: var(--accent-soft); }
.writing-codemirror .cm-cursor { border-left-color: var(--accent); }
.writing-codemirror .cm-tooltip { z-index: 50; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--foreground); box-shadow: var(--shadow); }
.writing-codemirror .cm-tooltip-autocomplete > ul { max-width: min(430px, calc(100vw - 36px)); padding: 5px; font-family: var(--font-sans); font-size: 12px; }
.writing-codemirror .cm-tooltip-autocomplete > ul > li { padding: 7px 9px; border-radius: 5px; white-space: normal; overflow-wrap: anywhere; }
.writing-codemirror .cm-tooltip-autocomplete > ul > li[aria-selected] { background: var(--accent-soft); color: var(--accent); }
.writing-codemirror .cm-completionDetail { display: block; margin: 2px 0 0 20px; color: var(--muted); font-size: 10px; }
.writing-engine-loading { padding: 0 18px 12px; color: var(--muted); font-size: 11px; }
.writing-outline { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.writing-outline-label { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 6px; color: var(--foreground); font-size: 12px; font-weight: 550; }
.writing-outline-label > span { color: var(--muted); font-weight: 400; font-size: 11px; }
.writing-outline > ol { list-style: none; padding: 0; margin: 0; max-height: 190px; overflow: auto; }
.writing-outline li > button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 5px; text-align: left; background: transparent; color: var(--foreground); font-size: 12px; }
.writing-outline li > button:hover { background: var(--accent-soft); color: var(--accent); }
.writing-outline li > button > span { color: var(--muted); font-size: 10px; flex-shrink: 0; }
.writing-outline-empty { padding: 5px 0; color: var(--muted); font-size: 12px; }
.writing-plain-preview { white-space: pre-wrap; line-height: 1.95; }
.writing-empty-preview { color: var(--muted); font-size: 13px; }
.journal-writing-field.is-focused { position: relative; z-index: 24; margin: 18px 0; }
.is-focused > .writing-canvas { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 10px 42px rgb(25 45 32 / 7%); }
.is-focused .writing-tools { position: sticky; top: 8px; z-index: 2; }
.is-focused .writing-textarea, .is-focused .writing-preview { min-height: min(55dvh, 620px); }
.is-focused .writing-codemirror .cm-content, .is-focused .writing-codemirror .cm-scroller { min-height: min(55dvh, 620px); }
.writing-focus-footer { position: sticky; bottom: 8px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.writing-focus-footer > span { color: var(--muted); font-size: 11px; }
.writing-focus-footer .button { min-height: 36px; font-size: 12px; padding: 7px 12px; }
.journal-content { color: var(--foreground); font-size: 15px; line-height: 1.95; overflow-wrap: anywhere; }
.journal-content > :first-child, .journal-content > div > :first-child { margin-top: 0; }
.journal-content p, .journal-content ul, .journal-content ol, .journal-content blockquote, .journal-content pre, .journal-content table { margin: 0 0 1em; }
.journal-content > :last-child, .journal-content > div > :last-child { margin-bottom: 0; }
.journal-content h1, .journal-content h2, .journal-content h3, .journal-content h4, .journal-content h5, .journal-content h6 { margin: 1.35em 0 .55em; line-height: 1.5; font-weight: 650; }
.journal-content h1 { font-size: 1.5em; }.journal-content h2 { font-size: 1.3em; }.journal-content h3 { font-size: 1.15em; }
.journal-content ul, .journal-content ol { padding-left: 1.7em; list-style-position: outside; }.journal-content ul { list-style-type: disc; }.journal-content ol { list-style-type: decimal; }
.journal-content li + li { margin-top: .25em; }.journal-content li > p { margin-bottom: .35em; }
.journal-content blockquote { padding: 9px 0 9px 18px; border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--muted); }
.journal-content blockquote > :last-child { margin-bottom: 0; }
.journal-content pre { padding: 16px 18px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); overflow: auto; font-size: 13px; line-height: 1.8; }
.journal-content code { font-family: "SFMono-Regular", Consolas, monospace; font-size: .88em; padding: 2px 5px; border-radius: 4px; background: var(--surface-muted); }
.journal-content pre code { padding: 0; background: none; font-size: inherit; }
.journal-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.journal-content hr { margin: 24px 0; border: 0; border-top: 1px solid var(--border); }
.journal-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: 13px; }
.journal-content th, .journal-content td { border: 1px solid var(--border); padding: 7px 12px; }.journal-content th { background: var(--surface-muted); font-weight: 600; }
@media (max-width: 767px) {
  .writing-focus-footer { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .writing-focus-footer .button { min-height: 44px; min-width: 100px; }
  .writing-tool, .writing-enable { min-height: 44px; min-width: 44px; }
  .writing-expand { min-height: 44px; }
  .writing-body.is-split { display: block; }
  .writing-body.is-split > .writing-preview, .writing-split-button { display: none; }
  .writing-codemirror .cm-editor { font-size: 16px; }
  .writing-codemirror .cm-line { padding: 0 12px; }
  .writing-codemirror .cm-tooltip-autocomplete > ul > li { min-height: 44px; }
  .writing-outline li > button { min-height: 44px; }
}
@media (max-width: 600px) {
  .writing-tools { padding: 7px; gap: 5px; }
  .writing-format-tools { flex: 1 1 100%; }
  .writing-view-tools { width: 100%; justify-content: flex-end; }
  .writing-tool { padding: 7px 9px; }
  .is-expanded .writing-textarea, .writing-preview { padding: 18px 16px; font-size: 16px; }
  .writing-bottom { padding: 10px 12px; }
  .writing-focus-footer { padding-bottom: 11px; }
  .writing-focus-footer > span { max-width: 57%; }
}