:root{--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--radius-sm:.25rem;--radius-md:.5rem;--radius-lg:.75rem;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.35s ease;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-serif:"Merriweather", Georgia, serif;--font-mono:"JetBrains Mono", "Fira Code", monospace}.theme-classic{--color-bg:#fff;--color-bg-muted:#f8fafc;--color-bg-elevated:#fff;--color-text:#1e293b;--color-text-muted:#64748b;--color-border:#e2e8f0;--color-primary:#3b82f6;--color-primary-hover:#2563eb;--color-primary-light:#3b82f61f;--color-code-bg:#f1f5f9;--color-error:#ef4444;--color-success:#22c55e}.theme-modern{--color-bg:#fafaff;--color-bg-muted:#f0f0ff;--color-bg-elevated:#fff;--color-text:#1e1b4b;--color-text-muted:#6366f1;--color-border:#c7d2fe;--color-primary:#8b5cf6;--color-primary-hover:#7c3aed;--color-primary-light:#8b5cf61f;--color-code-bg:#ede9fe;--color-error:#ec4899;--color-success:#10b981}.theme-dark{--color-bg:#0f172a;--color-bg-muted:#1e293b;--color-bg-elevated:#1e293b;--color-text:#f1f5f9;--color-text-muted:#94a3b8;--color-border:#334155;--color-primary:#60a5fa;--color-primary-hover:#3b82f6;--color-primary-light:#60a5fa26;--color-code-bg:#1e293b;--color-error:#f87171;--color-success:#34d399}.theme-sepia{--color-bg:#faf6f1;--color-bg-muted:#f4ece4;--color-bg-elevated:#fff;--color-text:#3d3425;--color-text-muted:#6b5c4a;--color-border:#d4c8b0;--color-primary:#b8860b;--color-primary-hover:#9a7209;--color-primary-light:#b8860b1f;--color-code-bg:#f4ece4;--color-error:#c53030;--color-success:#4ade80}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-normal), color var(--transition-normal);margin:0}#root{min-height:100vh;transition:background-color var(--transition-normal)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media print{.no-print{display:none!important}.page-break{page-break-before:always}.hljs{color-adjust:exact;-webkit-print-color-adjust:exact;print-color-adjust:exact}body{color:#000!important;background:#fff!important}.preview{box-shadow:none!important;border:none!important;height:auto!important;overflow:visible!important}.preview pre{page-break-inside:avoid;border:1px solid #ddd!important}.preview table{page-break-inside:avoid}.preview img{page-break-inside:avoid;max-width:100%!important}.preview h1,.preview h2,.preview h3{page-break-after:avoid}.preview a{text-decoration:underline;color:inherit!important}.preview a[href^=http]:after{content:" (" attr(href) ")";color:#666;font-size:.8em}}.editor{gap:var(--spacing-sm);flex-direction:column;height:100%;min-height:0;display:flex}.editor-header{justify-content:space-between;align-items:center;gap:var(--spacing-md);flex-shrink:0;display:flex}.file-upload{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:all var(--transition-fast);box-shadow:var(--shadow-sm);border:none;display:inline-flex}.file-upload:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.file-upload:active{box-shadow:var(--shadow-sm);transform:translateY(0)}.file-upload input{display:none}.file-upload svg{width:16px;height:16px}.error-message{color:var(--color-error);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);background:#ef44441a;font-size:.875rem;animation:.2s fadeIn}.editor-textarea{width:100%;min-height:0;padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-family:var(--font-mono);font-size:var(--font-size-sm);resize:none;background:var(--color-bg);color:var(--color-text);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);flex:1;line-height:1.7}.editor-textarea:focus{border-color:var(--color-primary);box-shadow:var(--shadow-md), 0 0 0 3px var(--color-primary-light);outline:none}.editor-textarea::placeholder{color:var(--color-text-muted);opacity:.7}.editor-textarea::-webkit-scrollbar{width:6px;height:6px}.editor-textarea::-webkit-scrollbar-track{background:0 0}.editor-textarea::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.editor-textarea::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}pre code.hljs{padding:1em;display:block;overflow-x:auto}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#005cc5}.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-comment,.hljs-code,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}.preview{height:100%;padding:var(--spacing-lg);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow-y:auto}.preview.pdf-export{box-shadow:none;background:#fff;border:none}.preview::-webkit-scrollbar{width:6px;height:6px}.preview::-webkit-scrollbar-track{background:0 0}.preview::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.preview::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.preview>:first-child{margin-top:0}.preview>:last-child{margin-bottom:0}.preview h1,.preview h2,.preview h3,.preview h4,.preview h5,.preview h6{font-weight:var(--font-weight-semibold);color:var(--color-text);letter-spacing:-.01em;margin-top:1.5em;margin-bottom:.5em;line-height:1.3}.preview h1:first-child,.preview h2:first-child,.preview h3:first-child{margin-top:0}.preview h1{border-bottom:2px solid var(--color-border);letter-spacing:-.02em;padding-bottom:.4em;font-size:2.25em}.preview h2{border-bottom:1px solid var(--color-border);padding-bottom:.3em;font-size:1.75em}.preview h3{font-size:1.375em}.preview h4{font-size:1.125em}.preview h5{font-size:1em}.preview h6{color:var(--color-text-muted);font-size:.875em}.preview p{margin:1em 0;line-height:1.7}.preview ul,.preview ol{margin:1em 0;padding-left:2em}.preview li{margin:.4em 0;line-height:1.5}.preview li>ul,.preview li>ol{margin:.25em 0}.preview blockquote{padding:var(--spacing-md) var(--spacing-lg);border-left:4px solid var(--color-primary);background:var(--color-bg-muted);color:var(--color-text);border-radius:0 var(--radius-md) var(--radius-md) 0;margin:1em 0}.preview blockquote p{margin:0}.preview code{font-family:var(--font-mono);background:var(--color-code-bg);color:var(--color-text);border-radius:4px;padding:.2em .4em;font-size:.875em}.preview pre{padding:var(--spacing-md);background:var(--color-code-bg);border-radius:var(--radius-md);border:1px solid var(--color-border);margin:1em 0;overflow-x:auto}.preview pre code{background:0 0;padding:0;font-size:.85em;line-height:1.6}.preview table{border-collapse:separate;border-spacing:0;border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;margin:1em 0;display:block;overflow-x:auto}.preview thead{background:var(--color-bg-muted)}.preview thead th{border-bottom:2px solid var(--color-border)}.preview th,.preview td{text-align:left;border-bottom:1px solid var(--color-border);padding:.75em 1em}.preview th{font-weight:var(--font-weight-semibold);color:var(--color-text)}.preview tbody tr:last-child td{border-bottom:none}.preview tbody tr:nth-child(2n){background:var(--color-bg-muted)}.preview tbody tr:hover{background:var(--color-primary-light)}.preview img{border-radius:var(--radius-sm);max-width:100%;height:auto;margin:1em 0}.preview a{color:var(--color-primary);border-bottom:1px solid #0000;text-decoration:none;transition:border-color .2s}.preview a:hover{border-bottom-color:var(--color-primary)}.preview hr{border:none;border-top:1px solid var(--color-border);margin:2em 0}.preview input[type=checkbox]{accent-color:var(--color-primary);margin-right:.5em}.preview strong{font-weight:600}.preview em{font-style:italic}.theme-selector{gap:var(--spacing-md);padding:var(--spacing-sm);background:var(--color-bg-muted);border-radius:var(--radius-lg);display:flex}.selector-group{gap:var(--spacing-xs);flex-direction:column;display:flex}.selector-group label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.selector-group select{appearance:none;padding:var(--spacing-sm) var(--spacing-xl,2rem) var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;min-width:120px;transition:all var(--transition-fast);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat}.selector-group select:hover{border-color:var(--color-primary)}.selector-group select:focus{border-color:var(--color-primary);box-shadow:var(--shadow-sm), 0 0 0 3px var(--color-primary-light);outline:none}.download-button{align-items:center;gap:var(--spacing-xs);background:var(--color-primary);color:#fff;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);transition:all var(--transition-fast);box-shadow:var(--shadow-sm);border:none;display:inline-flex}.download-button:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.download-button:active:not(:disabled){box-shadow:var(--shadow-sm);transform:translateY(0)}.download-button:disabled{opacity:.6;cursor:not-allowed}.download-loading{align-items:center;gap:var(--spacing-xs);display:inline-flex}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.6s linear infinite spin;display:inline-block}.app{background:var(--color-bg);height:100vh;color:var(--color-text);animation:fadeIn var(--transition-normal) ease-out;flex-direction:column;display:flex;overflow:hidden}.app-header{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border);background:var(--color-bg);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.app-header h1{color:var(--color-text);letter-spacing:-.02em;margin:0;font-size:1.5rem;font-weight:600}.header-controls{align-items:center;gap:var(--spacing-md);display:flex}.container{gap:var(--spacing-lg);padding:var(--spacing-lg);flex:1;min-height:0;display:flex;overflow:hidden}.container>.pane{border-radius:var(--radius-lg);flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.container>.pane.active{animation:slideUp var(--transition-normal) ease-out}.container>.editor-pane{border-right:1px solid var(--color-border)}@media (width<=768px){.container{gap:var(--spacing-md);padding:var(--spacing-md);flex-direction:column}.app-header{gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);flex-wrap:wrap}.app-header h1{font-size:1.25rem}.header-controls{gap:var(--spacing-sm);flex-wrap:wrap}.pane:not(.active){display:none}.container>.editor-pane{border-right:none}}.mobile-tab-bar{display:none}@media (width<=768px){.mobile-tab-bar{justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-muted);border-bottom:1px solid var(--color-border);display:flex}}.tab-button{padding:var(--spacing-sm) var(--spacing-lg);color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-bottom:2px solid #0000}.tab-button:hover{color:var(--color-text)}.tab-button.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}@media (width<=480px){.app-header{flex-direction:column;align-items:flex-start}.header-controls{justify-content:flex-start;width:100%}}