*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#1a1a1a;--muted:#6b6b6b;--dim:#9b9b9b;
  --paper:#ffffff;--bg:#f0ede8;--surface:#fafaf9;
  --border:#e2ddd8;--accent:#2563eb;--accent-bg:#eff6ff;
  --toolbar-bg:#ffffff;--shadow:0 1px 3px rgba(0,0,0,0.08);
  --shadow-page:0 4px 24px rgba(0,0,0,0.10);
  --btn-hover:#f5f3f0;--btn-active:#ebe8e3;
  --radius:6px;
}

body{font-family:'Sora',sans-serif;background:var(--bg);color:var(--ink);height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* MENU BAR */
#menubar{background:var(--toolbar-bg);border-bottom:1px solid var(--border);padding:0 12px;display:flex;align-items:center;gap:4px;min-height:36px;flex-shrink:0}
.menu-item{padding:4px 10px;border-radius:4px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap;position:relative}
.menu-item:hover{background:var(--btn-hover);color:var(--ink)}
.dropdown{display:none;position:absolute;top:100%;left:0;background:var(--toolbar-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.12);min-width:180px;z-index:9999;padding:4px 0}
.menu-item:hover .dropdown{display:block}
.dd-item{padding:7px 16px;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap;display:flex;align-items:center;justify-content:space-between;gap:16px}
.dd-item:hover{background:var(--btn-hover)}
.dd-item .shortcut{font-size:11px;color:var(--dim);font-family:'JetBrains Mono',monospace}
.dd-sep{height:1px;background:var(--border);margin:4px 0}
#doc-title-wrap{flex:1;display:flex;justify-content:center}
#doc-title{background:transparent;border:none;outline:none;font-family:'Sora',sans-serif;font-size:14px;font-weight:500;color:var(--ink);text-align:center;width:220px;border-bottom:1px solid transparent;padding:2px 6px;transition:.15s}
#doc-title:hover{border-bottom-color:var(--border)}
#doc-title:focus{border-bottom-color:var(--accent)}
.menu-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.menu-right button{padding:5px 14px;border-radius:var(--radius);border:none;cursor:pointer;font-family:'Sora',sans-serif;font-size:12px;font-weight:500;transition:.15s}
#exportBtn{background:var(--accent);color:#fff}
#exportBtn:hover{background:#1d4ed8}
#wordcount{font-size:11px;color:var(--dim);font-family:'JetBrains Mono',monospace}

/* TOOLBAR */
#toolbar{background:var(--toolbar-bg);border-bottom:1px solid var(--border);padding:5px 10px;display:flex;align-items:center;gap:2px;flex-wrap:wrap;flex-shrink:0;box-shadow:var(--shadow)}
.tb-sep{width:1px;height:22px;background:var(--border);margin:0 5px;flex-shrink:0}
.tb-btn{width:30px;height:28px;border:none;border-radius:4px;background:transparent;cursor:pointer;color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:center;transition:.12s;flex-shrink:0;font-family:'Sora',sans-serif;position:relative}
.tb-btn:hover{background:var(--btn-hover);color:var(--ink)}
.tb-btn.active{background:var(--accent-bg);color:var(--accent)}
.tb-btn svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}
select.tb-select{border:1px solid var(--border);border-radius:4px;background:var(--toolbar-bg);color:var(--ink);font-family:'Sora',sans-serif;font-size:12px;padding:2px 4px;height:28px;cursor:pointer;outline:none;transition:.12s}
select.tb-select:hover,select.tb-select:focus{border-color:var(--accent)}
input.tb-num{width:44px;border:1px solid var(--border);border-radius:4px;background:var(--toolbar-bg);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:12px;padding:2px 4px;height:28px;outline:none;text-align:center;transition:.12s}
input.tb-num:focus{border-color:var(--accent)}
.tb-color-group{display:flex;align-items:center;gap:2px}
.tb-color-btn{width:30px;height:28px;border-radius:4px;border:1px solid var(--border);cursor:pointer;background:var(--toolbar-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;transition:.12s}
.tb-color-btn:hover{background:var(--btn-hover)}
.color-letter{font-size:14px;font-weight:700;line-height:1;color:var(--ink)}
.color-bar{width:18px;height:3px;border-radius:1px}

/* RULER */
#ruler{background:var(--toolbar-bg);border-bottom:1px solid var(--border);height:22px;position:relative;flex-shrink:0;overflow:hidden}
.ruler-inner{position:absolute;left:50%;transform:translateX(-50%);width:794px;height:100%}
.ruler-margin{position:absolute;top:0;height:100%;background:var(--btn-active);opacity:.5}

/* EDITOR AREA */
#editor-area{flex:1;overflow-y:auto;padding:28px 0 80px;display:flex;flex-direction:column;align-items:center;background:var(--bg)}
#editor-area::-webkit-scrollbar{width:8px}
#editor-area::-webkit-scrollbar-track{background:transparent}
#editor-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

.page-wrap{width:794px;transform-origin:top center;margin-bottom:24px}
.page{background:var(--paper);box-shadow:var(--shadow-page);min-height:1123px;padding:96px;position:relative;border-radius:2px}

#editor{outline:none;min-height:900px;font-family:'Crimson Pro',serif;font-size:16px;line-height:1.8;color:var(--ink);caret-color:var(--accent);word-wrap:break-word}
#editor:empty::before{content:attr(data-placeholder);color:var(--dim);pointer-events:none;font-style:italic}

#editor h1{font-family:'Sora',sans-serif;font-size:30px;font-weight:600;margin:1.4em 0 .5em;line-height:1.2;color:var(--ink)}
#editor h2{font-family:'Sora',sans-serif;font-size:24px;font-weight:600;margin:1.3em 0 .4em;line-height:1.3}
#editor h3{font-family:'Sora',sans-serif;font-size:19px;font-weight:500;margin:1.2em 0 .35em}
#editor h4{font-family:'Sora',sans-serif;font-size:14px;font-weight:600;margin:1em 0 .3em;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
#editor p{margin:0 0 .8em}
#editor ul,#editor ol{padding-left:1.8em;margin:0 0 .8em}
#editor li{margin:.25em 0}
#editor blockquote{border-left:3px solid var(--accent);margin:1.2em 0;padding:.6em 1.2em;color:var(--muted);font-style:italic;background:var(--accent-bg);border-radius:0 var(--radius) var(--radius) 0}
#editor table{border-collapse:collapse;width:100%;margin:1.2em 0;font-size:15px;font-family:'Sora',sans-serif}
#editor td,#editor th{border:1px solid var(--border);padding:8px 14px}
#editor th{background:var(--btn-hover);font-weight:600;font-size:13px}
#editor a{color:var(--accent);text-decoration:underline}
#editor code{font-family:'JetBrains Mono',monospace;font-size:.85em;background:var(--btn-hover);padding:2px 6px;border-radius:3px}
#editor pre{background:#1e1c1a;color:#f0ede8;border-radius:var(--radius);padding:1.2em;font-family:'JetBrains Mono',monospace;font-size:13px;overflow-x:auto;margin:1em 0;line-height:1.6}
#editor hr{border:none;border-top:2px solid var(--border);margin:1.8em 0}
#editor img{max-width:100%;border-radius:4px;display:block;margin:.5em 0}

.page-num{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim)}

/* STATUS BAR */
#statusbar{background:var(--toolbar-bg);border-top:1px solid var(--border);padding:0 16px;height:24px;display:flex;align-items:center;gap:20px;flex-shrink:0}
.status-item{font-size:11px;color:var(--dim);font-family:'JetBrains Mono',monospace;white-space:nowrap}

/* COLOR PALETTE */
.color-palette{display:none;position:fixed;background:var(--toolbar-bg);border:1px solid var(--border);border-radius:var(--radius);padding:8px;box-shadow:0 6px 20px rgba(0,0,0,.15);z-index:9999;grid-template-columns:repeat(8,22px);gap:4px}
.color-palette.show{display:grid}
.cp-swatch{width:22px;height:22px;border-radius:3px;cursor:pointer;border:2px solid transparent;transition:.1s}
.cp-swatch:hover{transform:scale(1.2)}
.cp-swatch.sel{border-color:var(--accent)}

/* FIND BAR */
#findBar{display:none;position:fixed;top:84px;right:20px;background:var(--toolbar-bg);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;box-shadow:0 6px 20px rgba(0,0,0,.15);z-index:9999;align-items:center;gap:6px}
#findBar.show{display:flex}
#findInput{border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--ink);font-family:'Sora',sans-serif;font-size:13px;padding:5px 10px;outline:none;width:180px}
#findInput:focus{border-color:var(--accent)}
#findBar button{padding:4px 10px;border-radius:4px;border:1px solid var(--border);background:var(--btn-hover);color:var(--ink);font-size:12px;cursor:pointer;font-family:'Sora',sans-serif}
#findBar button:hover{background:var(--btn-active)}
#findCount{font-size:11px;color:var(--dim);font-family:'JetBrains Mono',monospace;min-width:40px}

@media print {
  #menubar,#toolbar,#ruler,#statusbar,#findBar,#colorPalette{display:none!important}
  #editor-area{overflow:visible;padding:0}
  .page-wrap{transform:none!important;width:100%}
  .page{box-shadow:none;min-height:auto}
  body{overflow:auto}
}