:root{--snow: #fafbfc;--ice-blue: #e8f0f7;--warm-beige: #f5f0e8;--paper: #faf9f7;--paper-shadow: #ebe8e3;--text-soft: #3d4550;--text-muted: #6b7580;--text-heading: #2a3340;--accent: #7a9bb8;--accent-hover: #5f82a0;--border-soft: rgba(122, 155, 184, .2);--shadow-soft: 0 4px 24px rgba(42, 51, 64, .06);--shadow-hover: 0 6px 28px rgba(42, 51, 64, .09);--radius-card: 16px;--radius-btn: 10px;--font-mono: "JetBrains Mono", Menlo, Consolas, monospace;--font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:var(--font-mono);font-size:15px;color:var(--text-soft);background:linear-gradient(165deg,var(--snow) 0%,var(--ice-blue) 45%,var(--warm-beige) 100%);background-attachment:fixed;line-height:1.5;-webkit-font-smoothing:antialiased}#root{min-height:100%}.app{display:flex;flex-direction:column;min-height:100vh;max-width:1600px;margin:0 auto;padding:1.25rem 1.5rem 1rem}.app-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.app-title{margin:0;font-family:var(--font-serif);font-size:2rem;font-weight:600;color:var(--text-heading);letter-spacing:.02em}.app-subtitle{margin:.25rem 0 0;font-family:var(--font-mono);font-size:.85rem;color:var(--text-muted);font-weight:400}.toolbar{display:flex;flex-wrap:wrap;gap:.5rem}.btn{font-family:var(--font-mono);font-size:.8rem;padding:.5rem 1rem;border:1px solid var(--border-soft);border-radius:var(--radius-btn);background:var(--paper);color:var(--text-soft);cursor:pointer;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;box-shadow:0 1px 3px #2a33400a}.btn:hover{background:var(--ice-blue);border-color:#7a9bb859;box-shadow:var(--shadow-soft);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-ghost:hover{background:#f5f0e8e6}.file-input-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;flex:1;min-height:0}@media(max-width:768px){.app-layout{grid-template-columns:1fr;grid-template-rows:auto auto}.app{padding:1rem}.app-title{font-size:1.6rem}}.panel{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);border:1px solid var(--border-soft);overflow:hidden;min-height:320px}.panel-editor,.panel-preview{min-height:0}@media(min-width:769px){.panel{min-height:calc(100vh - 11rem)}.panel-editor .editor{min-height:0}}.panel-label{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);padding:.75rem 1.25rem 0}.panel-editor .editor{flex:1;width:100%;min-height:280px;margin:0;padding:1rem 1.25rem 1.25rem;border:none;background:transparent;font-family:var(--font-mono);font-size:.9rem;line-height:1.65;color:var(--text-soft);resize:none;outline:none;overflow-y:auto}.panel-editor .editor:focus{box-shadow:inset 0 0 0 2px #7a9bb840;border-radius:0 0 var(--radius-card) var(--radius-card)}.panel-editor .editor::placeholder{color:var(--text-muted);opacity:.6}.panel-preview{background:linear-gradient(180deg,var(--paper) 0%,#f7f5f2 100%)}.preview-paper{flex:1;overflow-y:auto;min-height:0;padding:.5rem 1.5rem 1.5rem;font-family:var(--font-serif);font-size:1.15rem;line-height:1.75;color:var(--text-soft);transition:opacity .2s ease}.preview-paper.preview-updating{opacity:.72}.preview-paper h1,.preview-paper h2,.preview-paper h3,.preview-paper h4{font-family:var(--font-serif);color:var(--text-heading);font-weight:600;margin-top:1.25em;margin-bottom:.5em;line-height:1.3}.preview-paper h1{font-size:1.85rem;margin-top:0}.preview-paper h2{font-size:1.45rem}.preview-paper h3{font-size:1.2rem}.preview-paper p{margin:.75em 0}.preview-paper ul,.preview-paper ol{margin:.75em 0;padding-left:1.5em}.preview-paper li{margin:.35em 0}.preview-paper blockquote{margin:1em 0;padding:.5em 1em;border-left:3px solid var(--accent);background:#e8f0f780;color:var(--text-muted);font-style:italic}.preview-paper code{font-family:var(--font-mono);font-size:.85em;background:var(--ice-blue);padding:.15em .4em;border-radius:4px}.preview-paper pre{margin:1em 0;padding:1em 1.25em;background:#eef2f6;border-radius:8px;overflow-x:auto;border:1px solid var(--border-soft)}.preview-paper pre code{background:none;padding:0;font-size:.8rem}.preview-paper a{color:var(--accent-hover);text-decoration:none;border-bottom:1px solid rgba(95,130,160,.3)}.preview-paper a:hover{border-bottom-color:var(--accent-hover)}.preview-paper hr{border:none;border-top:1px solid var(--border-soft);margin:1.5em 0}.preview-paper strong{font-weight:600;color:var(--text-heading)}.app-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem;padding:.75rem;font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted)}.app-footer-stats{display:flex;align-items:center;gap:.5rem}.footer-separator{opacity:.5}.app-meta{margin:0;font-size:.7rem;color:var(--text-muted);opacity:.85}.app-meta a{color:var(--accent-hover);text-decoration:none;border-bottom:1px solid rgba(95,130,160,.25)}.app-meta a:hover{border-bottom-color:var(--accent-hover)}.app-storage-warning{margin:0;font-size:.7rem;color:#8b5a4a;text-align:center;max-width:28rem}