.editor-pane{flex:1;display:flex;flex-direction:column;background:#f8fafc;overflow:hidden;height:100%}.editor-container{flex:1;display:flex;overflow:hidden;position:relative}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#f1f5f9;border-bottom:1px solid #e2e8f0}.editor-header h2{font-size:.875rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin:0}.word-count{font-size:.75rem;color:#94a3b8}.line-numbers{padding:1.5rem 0;background:#eef2f7;border-right:1px solid #e2e8f0;overflow-y:auto;overflow-x:hidden;-webkit-user-select:none;user-select:none;text-align:right;min-width:50px;color:#94a3b8;font-family:Fira Code,Monaco,Courier New,monospace;font-size:14px;line-height:1.6;flex-shrink:0}.line-numbers::-webkit-scrollbar{width:0px;background:transparent}.line-number{padding:0 1rem;height:22.4px}.editor-textarea{flex:1;padding:1.5rem;border:none;outline:none;font-family:Fira Code,Monaco,Courier New,monospace;font-size:14px;line-height:1.6;color:#1e293b;background:#f8fafc;resize:none;overflow-y:auto;overflow-x:auto;min-height:0;height:100%}.editor-textarea::placeholder{color:#94a3b8}.editor-textarea::-webkit-scrollbar{width:8px}.editor-textarea::-webkit-scrollbar-track{background:#f1f5f9}.editor-textarea::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.editor-textarea::-webkit-scrollbar-thumb:hover{background:#94a3b8}@media (max-width: 768px){.editor-pane{border-right:none;border-bottom:1px solid #e2e8f0}.editor-textarea{font-size:13px}.line-numbers{min-width:40px;font-size:13px}.line-number{padding:0 .5rem}}.preview-pane{flex:1;display:flex;flex-direction:column;background:#fff;overflow:hidden;height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#f1f5f9;border-bottom:1px solid #e2e8f0}.preview-header h2{font-size:.875rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin:0}.preview-content{flex:1;padding:.5rem 2rem 2rem;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.6;color:#1e293b}.preview-content .empty-state{color:#94a3b8;font-style:italic;text-align:center;margin-top:3rem}.preview-content h1,.preview-content h2,.preview-content h3,.preview-content h4,.preview-content h5,.preview-content h6{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.2;color:#0f172a}.preview-content h1:first-child,.preview-content h2:first-child,.preview-content h3:first-child,.preview-content h4:first-child,.preview-content h5:first-child,.preview-content h6:first-child{margin-top:.5em}.preview-content h1{font-size:2em;border-bottom:2px solid #e2e8f0;padding-bottom:.3em}.preview-content h2{font-size:1.75em;border-bottom:1px solid #e2e8f0;padding-bottom:.3em}.preview-content h3{font-size:1.5em}.preview-content h4{font-size:1.25em}.preview-content h5{font-size:1.125em}.preview-content h6{font-size:1em;color:#475569}.preview-content p{margin-bottom:1em}.preview-content strong{font-weight:600;color:#0f172a}.preview-content em{font-style:italic}.preview-content a{color:#3b82f6;text-decoration:none;border-bottom:1px solid #93c5fd}.preview-content a:hover{border-bottom-color:#3b82f6}.preview-content ul,.preview-content ol{margin:1em 0;padding-left:2em}.preview-content li{margin-bottom:.5em}.preview-content li input[type=checkbox]{margin-right:.5em}.preview-content pre{background:#f6f8fa;border:1px solid #e1e4e8;border-radius:6px;padding:16px;margin:1em 0;overflow-x:auto;font-size:.875em}.preview-content code{font-family:Fira Code,Courier New,monospace;font-size:.875em;background:#f6f8fa;padding:2px 6px;border-radius:3px;color:#d73a49}.preview-content pre code{background:none;padding:0;color:inherit;border-radius:0}.preview-content table{width:100%;border-collapse:collapse;margin:1em 0;overflow-x:auto;display:block}.preview-content table thead{background:#f6f8fa}.preview-content table th,.preview-content table td{border:1px solid #d0d7de;padding:8px 12px;text-align:left}.preview-content table th{font-weight:600;color:#0f172a}.preview-content blockquote{border-left:4px solid #d0d7de;padding-left:16px;margin:1em 0;color:#64748b;font-style:italic}.preview-content hr{border:none;border-top:2px solid #e2e8f0;margin:2em 0}.preview-content img{max-width:100%;height:auto;border-radius:6px;margin:1em 0}.preview-content::-webkit-scrollbar{width:8px}.preview-content::-webkit-scrollbar-track{background:#f1f5f9}.preview-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.preview-content::-webkit-scrollbar-thumb:hover{background:#94a3b8}.preview-content .token.comment,.preview-content .token.prolog,.preview-content .token.doctype,.preview-content .token.cdata{color:#6a737d}.preview-content .token.punctuation{color:#5e6687}.preview-content .token.property,.preview-content .token.tag,.preview-content .token.boolean,.preview-content .token.number,.preview-content .token.constant,.preview-content .token.symbol,.preview-content .token.deleted{color:#d73a49}.preview-content .token.selector,.preview-content .token.attr-name,.preview-content .token.string,.preview-content .token.char,.preview-content .token.builtin,.preview-content .token.inserted{color:#22863a}.preview-content .token.operator,.preview-content .token.entity,.preview-content .token.url,.preview-content .language-css .token.string,.preview-content .style .token.string{color:#6f42c1}.preview-content .token.atrule,.preview-content .token.attr-value,.preview-content .token.keyword{color:#005cc5}.preview-content .token.function,.preview-content .token.class-name{color:#6f42c1}.preview-content .token.regex,.preview-content .token.important,.preview-content .token.variable{color:#e36209}@media (max-width: 768px){.preview-content{padding:1.5rem;font-size:15px}}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000000d}.toolbar-left{display:flex;align-items:center;gap:1rem}.toolbar-title{font-size:1.25rem;font-weight:600;color:#1e293b;margin:0}.toolbar-subtitle{font-size:1.25rem;color:#94a3b8;margin-left:.5rem}.toolbar-right{display:flex;gap:.75rem;align-items:center}.sync-scroll-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.5rem .75rem;border-radius:6px;transition:background .2s;-webkit-user-select:none;user-select:none}.sync-scroll-toggle:hover{background:#f1f5f9}.sync-scroll-toggle input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0}.sync-scroll-label{font-size:.875rem;color:#475569;font-weight:500}.btn{padding:.5rem 1.25rem;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;outline:none}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover:not(:disabled){background:#2563eb;box-shadow:0 2px 8px #3b82f64d}.btn-secondary{background:#f1f5f9;color:#475569}.btn-secondary:hover:not(:disabled){background:#e2e8f0}@media (max-width: 768px){.toolbar{padding:.75rem 1rem}.toolbar-title{font-size:1rem}.toolbar-subtitle{display:none}.sync-scroll-toggle{padding:.4rem .5rem}.sync-scroll-label{font-size:.75rem}.btn{padding:.4rem 1rem;font-size:.8rem}}.notification{position:fixed;top:1rem;right:1rem;display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;background:#fff;border-radius:8px;box-shadow:0 10px 25px #0000001a;border-left:4px solid;min-width:300px;max-width:500px;z-index:1000;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}.notification-success{border-left-color:#10b981}.notification-error{border-left-color:#ef4444}.notification-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;font-weight:700;font-size:1rem}.notification-success .notification-icon{background:#d1fae5;color:#10b981}.notification-error .notification-icon{background:#fee2e2;color:#ef4444}.notification-message{flex:1;color:#1e293b;font-size:.875rem;line-height:1.4}.notification-close{background:none;border:none;color:#94a3b8;font-size:1.5rem;line-height:1;cursor:pointer;padding:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.notification-close:hover{background:#f1f5f9;color:#64748b}@media (max-width: 768px){.notification{top:.5rem;right:.5rem;left:.5rem;min-width:auto}}.resizable-container{display:flex;flex:1;overflow:hidden;position:relative}.resizable-left,.resizable-right{overflow:hidden;display:flex;flex-direction:column}.resizable-divider{width:8px;background:#e2e8f0;cursor:col-resize;position:relative;flex-shrink:0;transition:background .2s;z-index:10}.resizable-divider:hover,.resizable-divider.dragging{background:#cbd5e1}.resizable-divider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:40px;background:#94a3b8;border-radius:2px;pointer-events:none}.resizable-divider:hover .resizable-divider-handle,.resizable-divider.dragging .resizable-divider-handle{background:#64748b}.resizable-container.dragging{-webkit-user-select:none;user-select:none}.app{display:flex;flex-direction:column;height:100vh;width:100vw;background:#fff}@media (max-width: 768px){.main-content{flex-direction:column}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f5f5;overflow:hidden}#root{height:100vh;width:100vw;overflow:hidden}code{font-family:Fira Code,Courier New,monospace}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}