:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #292b27; background: #eeede7; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #eeede7; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-header { height: 64px; display: flex; align-items: center; gap: 20px; padding: 0 24px; border-bottom: 1px solid #d9d8d0; background: #faf9f5; }
.mobile-header, .mobile-action-bar { display: none; }
.brand { color: #1c1d19; font-family: Georgia, "Songti SC", serif; font-size: 18px; font-weight: 700; letter-spacing: .17em; text-decoration: none; }
.version { color: #98968d; font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; white-space: nowrap; }
.desktop-version { margin-left: -13px; }
.document-title input { width: min(36vw, 360px); border: 0; outline: 0; background: transparent; color: #363732; font: 15px Georgia, "Songti SC", serif; }
.save-status, #preview-hint { color: #87867f; font-size: 12px; }
.header-actions { display: flex; gap: 9px; margin-left: auto; }
.button { display: inline-flex; align-items: center; min-height: 34px; border: 1px solid #d4d2ca; border-radius: 6px; padding: 7px 11px; color: #30312c; background: #fffefa; font-size: 13px; text-decoration: none; }
.button.primary { border-color: #24251f; background: #24251f; color: #fffefb; }
.workspace { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.35fr) minmax(220px, .7fr); height: calc(100vh - 64px); min-height: 590px; }
.editor-pane, .preview-pane { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid #d9d8d0; }
.editor-pane { background: #e7e6df; }
.preview-pane { background: #f8f7f2; }
.pane-header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 18px; border-bottom: 1px solid #deddd5; color: #77766e; font-size: 10px; letter-spacing: .12em; }
.text-button { border: 0; padding: 4px 0; color: #68675f; background: transparent; font-size: 12px; }
.text-button:disabled { cursor: default; color: #b0aea6; }
.editor-tools { display: flex; gap: 13px; }
#editor { flex: 1; width: 100%; resize: none; border: 0; outline: none; padding: 22px 20px; color: #41423c; background: transparent; font: 13px/1.85 ui-monospace, SFMono-Regular, Menlo, monospace; }
.editor-footer { display: flex; justify-content: space-between; min-height: 39px; padding: 10px 18px; border-top: 1px solid #deddd5; color: #85847b; font-size: 11px; }
.preview-scroll { overflow: auto; flex: 1; padding: 38px clamp(20px, 5vw, 66px) 80px; }
#preview { margin: 0 auto; max-width: 620px; color: #292a26; }
.settings-pane { overflow: auto; padding: 23px 18px; background: #f2f1eb; }
.settings-block { margin-bottom: 28px; }
.settings-block h2 { margin: 0 0 12px; color: #3c3d37; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.style-picker { display: grid; gap: 7px; }
.style-picker button { display: grid; gap: 4px; width: 100%; border: 1px solid #d7d5cc; border-radius: 6px; padding: 10px; color: #33342f; background: #fbfaf6; text-align: left; }
.style-picker button[aria-checked="true"] { border-color: #2a2b26; box-shadow: inset 3px 0 #2a2b26; }
.style-picker b { font: 500 13px Georgia, "Songti SC", serif; }
.style-picker span, .help-block p { color: #828178; font-size: 11px; line-height: 1.55; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
.segmented button { border: 1px solid #d3d1c9; padding: 8px 3px; color: #626159; background: #fbfaf6; font-size: 11px; }
.segmented button + button { border-left: 0; }
.segmented button:first-child { border-radius: 6px 0 0 6px; }
.segmented button:last-child { border-radius: 0 6px 6px 0; }
.segmented button[aria-checked="true"] { color: #fffef9; background: #383933; }
.select-wrap select { width: 100%; appearance: none; border: 1px solid #d3d1c9; border-radius: 6px; padding: 9px; color: #3e3f39; background: #fbfaf6; font-size: 12px; }
.help-block { border-top: 1px solid #dddcd4; padding-top: 17px; }
.help-block p { margin: 0; }
.toast { position: fixed; right: 20px; bottom: 20px; max-width: 280px; transform: translateY(16px); opacity: 0; border-radius: 6px; padding: 10px 13px; color: #fffefa; background: #24251f; box-shadow: 0 10px 28px #20201840; font-size: 13px; transition: .2s ease; pointer-events: none; }
.toast.show { transform: translateY(0); opacity: 1; }
.library { position: fixed; z-index: 3; inset: 0; visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility .18s; }
.library.open { visibility: visible; opacity: 1; }
.library-backdrop { position: absolute; inset: 0; background: #1e1f1a55; }
.library-sheet { position: absolute; top: 0; right: 0; width: min(390px, 92vw); height: 100%; padding: 24px 20px; background: #f8f7f2; box-shadow: -14px 0 35px #1d1e1830; transform: translateX(16px); transition: transform .18s ease; }
.library.open .library-sheet { transform: translateX(0); }
.library-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #dcdad1; }
.library-header h2 { margin: 0; font: 500 19px Georgia, "Songti SC", serif; }
.article-list { display: grid; gap: 8px; padding-top: 14px; }
.article-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; border: 1px solid #dfddd5; border-radius: 6px; padding: 6px; background: #fffefa; }
.article-entry.active { border-color: #292a25; box-shadow: inset 3px 0 #292a25; }
.article-open { min-width: 0; border: 0; padding: 6px; color: #3d3e38; background: transparent; text-align: left; }
.article-open b { display: block; overflow: hidden; margin-bottom: 5px; font: 500 15px Georgia, "Songti SC", serif; text-overflow: ellipsis; white-space: nowrap; }
.article-open span { color: #88867e; font-size: 11px; }
.article-open em { margin-left: 7px; color: #8d542f; font-size: 10px; font-style: normal; }
.article-delete { align-self: center; border: 0; padding: 6px; color: #9b6253; background: transparent; font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* Preview styles */
#preview { --body-size: 16px; --body-leading: 2; --heading-space: 1.35em; font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: var(--body-size); line-height: var(--body-leading); }
#preview[data-density="standard"] { --body-size: 15px; --body-leading: 1.85; }
#preview[data-density="compact"] { --body-size: 14px; --body-leading: 1.7; }
#preview.font-literary { font-family: "Kaiti SC", "STKaiti", serif; }
#preview.font-sans { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
#preview h1, #preview h2, #preview h3 { color: #1e1f1b; font-weight: 600; line-height: 1.35; }
#preview h1 { margin: 0 0 .55em; font-size: 2em; letter-spacing: .02em; }
#preview h2 { margin: var(--heading-space) 0 .7em; font-size: 1.38em; }
#preview h3 { margin: 1.25em 0 .5em; font-size: 1.1em; }
#preview p { margin: 0 0 1.15em; }
#preview a { color: #8d552f; text-decoration: underline; text-underline-offset: 3px; }
#preview strong.accent { color: #a6442c; font-weight: 700; }
#preview blockquote { margin: 1.55em 0; border-left: 2px solid #9a7654; padding: .1em 0 .1em 1em; color: #69685f; }
#preview hr { width: 44px; height: 1px; margin: 2em 0; border: 0; background: #31322c; }
#preview ul, #preview ol { margin: 0 0 1.2em; padding-left: 1.35em; }
#preview li { margin: .3em 0; }
#preview code { border-radius: 3px; padding: .12em .3em; background: #eceae3; color: #984b2d; font-family: ui-monospace, monospace; font-size: .85em; }
#preview pre { overflow: auto; border-radius: 4px; padding: 1em; color: #edede7; background: #282924; line-height: 1.6; }
#preview pre code { padding: 0; color: inherit; background: none; }
#preview img { display: block; width: 100%; height: auto; margin: 1.65em auto .35em; }
#preview .image-caption { margin: 0 0 1.8em; color: #85837b; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 11px; line-height: 1.55; text-align: center; }
#preview table { width: 100%; margin: 1.4em 0; border-collapse: collapse; font-size: .88em; }
#preview th, #preview td { border-bottom: 1px solid #d8d6ce; padding: .55em .4em; text-align: left; }
#preview.article-style-business h1 { font-size: 2.1em; font-weight: 500; }
#preview.article-style-business h2 { border-bottom: 1px solid #d8d6ce; padding-bottom: .35em; }
#preview.article-style-finance { font-size: calc(var(--body-size) - 1px); }
#preview.article-style-finance h1 { border-top: 4px solid #252620; padding-top: .55em; font-size: 1.85em; }
#preview.article-style-finance h2 { border-left: 3px solid #9b4f32; padding-left: .65em; }
#preview.article-style-finance strong.accent { color: #a6462b; }
#preview.article-style-geek { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
#preview.article-style-geek h1 { border-left: 5px solid #147ab8; padding-left: .45em; font-family: Georgia, "Songti SC", serif; font-size: 1.9em; }
#preview.article-style-geek h2 { color: #0a659e; font-size: 1.25em; }
#preview.article-style-geek blockquote { border-color: #147ab8; }
#preview.article-style-geek strong.accent, #preview.article-style-geek a { color: #0872b4; }
#preview.article-style-product h1 { color: #30285a; font-size: 2.15em; font-weight: 500; }
#preview.article-style-product h2 { border-bottom: 2px solid #6d5bc0; padding-bottom: .3em; }
#preview.article-style-product blockquote { border-color: #6d5bc0; }
#preview.article-style-product strong.accent, #preview.article-style-product a { color: #6956b4; }
#preview.article-style-research { color: #343934; }
#preview.article-style-research h1 { font-weight: 500; }
#preview.article-style-research blockquote { border-color: #667c6a; }
#preview.article-style-research a { color: #4e6f56; }
#preview.article-style-research strong.accent { color: #4e6f56; }
@media (max-width: 900px) { .workspace { grid-template-columns: minmax(230px, .8fr) minmax(330px, 1.2fr); height: auto; } .settings-pane { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .settings-block { margin: 0; } }
@media (max-width: 640px) {
  :root { background: #f8f7f2; }
  body { min-width: 0; overflow-x: hidden; background: #f8f7f2; }
  .app-header { display: none; }
  .mobile-header { position: relative; z-index: 2; display: block; background: #faf9f5; border-bottom: 1px solid #deddd5; }
  .mobile-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 5px 20px; }
  .mobile-brand { color: #20211d; font: 600 18px Georgia, "Songti SC", serif; letter-spacing: .01em; white-space: nowrap; }
  .mobile-brand .version { vertical-align: middle; font-size: 10px; }
  .mobile-brand span { color: #9b4f32; }
  .mobile-style-label select { max-width: 108px; appearance: none; border: 1px solid #d8d6ce; border-radius: 6px; padding: 7px 20px 7px 8px; color: #4a4942; background: #fffefa; font-size: 12px; }
  .mobile-clear { border: 0; padding: 7px 0; color: #8a5c50; background: transparent; font-size: 12px; }
  .mobile-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 0 16px; }
  .mobile-tabs button { min-height: 42px; border: 0; border-bottom: 2px solid transparent; color: #88867e; background: transparent; font-size: 14px; }
  .mobile-tabs button[aria-selected="true"] { border-bottom-color: #252620; color: #252620; font-weight: 600; }
  .workspace { display: block; height: calc(100dvh - 99px); min-height: 0; }
  .editor-pane, .preview-pane { height: 100%; border: 0; background: #f8f7f2; }
  .editor-pane .pane-header, .editor-footer, .preview-pane .pane-header, .settings-pane { display: none; }
  #editor { padding: 20px 20px calc(98px + env(safe-area-inset-bottom)); font-size: 16px; line-height: 1.8; -webkit-text-size-adjust: 100%; }
  .preview-scroll { padding: 28px 20px calc(108px + env(safe-area-inset-bottom)); }
  #preview { max-width: 100%; }
  .preview-pane { min-height: 0; }
  body[data-mobile-tab="edit"] .preview-pane, body[data-mobile-tab="edit"] .settings-pane { display: none; }
  body[data-mobile-tab="preview"] .editor-pane, body[data-mobile-tab="preview"] .settings-pane { display: none; }
  .mobile-action-bar { position: fixed; z-index: 4; right: 0; bottom: 0; left: 0; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #deddd5; background: #faf9f5ee; backdrop-filter: blur(12px); }
  .mobile-action { min-height: 50px; border: 1px solid #d4d2ca; border-radius: 8px; padding: 10px 14px; background: #fffefa; color: #30312c; font-size: 16px; font-weight: 600; }
  .mobile-action.primary { flex: 1; border-color: #24251f; background: #24251f; color: #fffefb; }
  .mobile-action.secondary { flex: 0 0 auto; background: #fffefa; }
  body[data-mobile-tab="edit"] #mobile-back-action, body[data-mobile-tab="edit"] #mobile-copy-action { display: none; }
  body[data-mobile-tab="preview"] #mobile-preview-action { display: none; }
  body[data-mobile-tab="preview"] #mobile-paste-action { display: none; }
  .toast { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); left: 16px; max-width: none; text-align: center; }
}