*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:100vh;display:flex;flex-direction:column;background:#f8f9fa;overflow:hidden}header{background:#1a1a2e;color:#fff;padding:12px 20px;flex-shrink:0}.logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600}.logo svg{width:24px;height:24px}.toolbar{background:#fff;border-bottom:1px solid #e5e5e5;padding:8px 12px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex-shrink:0}.toolbar-group{display:flex;gap:2px}.toolbar-divider{width:1px;height:24px;background:#e5e5e5;margin:0 8px}.toolbar button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:#555;font-size:12px;font-weight:600;transition:all .15s}.toolbar button:hover{background:#f0f0f0;color:#1a1a2e}.toolbar button:active{background:#e5e5e5}.toolbar button svg{width:16px;height:16px}main{display:flex;flex:1;overflow:hidden}.panel{display:flex;flex-direction:column;min-width:250px;overflow:hidden}#editor-panel,#preview-panel{flex:1}.panel-header{background:#fff;padding:10px 16px;font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;gap:6px;flex-shrink:0}.panel-header:before{content:"";width:8px;height:8px;border-radius:50%}#editor-panel .panel-header:before{background:#4ade80}#preview-panel .panel-header:before{background:#60a5fa}#editor{flex:1;overflow:auto;background:#1e1e2e}#editor .cm-editor{height:100%;font-size:14px}#editor .cm-scroller{font-family:SF Mono,Monaco,Menlo,Consolas,monospace;line-height:1.6;padding:16px}#editor .cm-content{padding:0}#editor .cm-focused{outline:none}#editor .cm-gutters{background:#1e1e2e;border-right:1px solid #333}.resizer{width:6px;background:#e5e5e5;cursor:col-resize;position:relative;transition:background .2s;flex-shrink:0}.resizer:hover,.resizer.dragging{background:#1a1a2e}.resizer:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:40px;background:#ccc;border-radius:2px}.resizer:hover:after,.resizer.dragging:after{background:#fff}#preview{flex:1;padding:24px 32px;overflow-y:auto;background:#fff}#preview h1,#preview h2,#preview h3,#preview h4,#preview h5,#preview h6{margin:24px 0 12px;color:#1a1a2e;font-weight:600;line-height:1.3}#preview h1:first-child,#preview h2:first-child,#preview h3:first-child{margin-top:0}#preview h1{font-size:32px;border-bottom:2px solid #eee;padding-bottom:12px}#preview h2{font-size:26px}#preview h3{font-size:22px}#preview h4{font-size:18px}#preview p{margin:16px 0;line-height:1.8;color:#374151}#preview code{background:#f3f4f6;padding:3px 8px;border-radius:5px;font-family:SF Mono,Monaco,monospace;font-size:13px;color:#e11d48}#preview pre{background:#1e1e2e;color:#f8f8f2;padding:20px;border-radius:10px;overflow-x:auto;margin:20px 0;line-height:1.6}#preview pre code{background:none;color:inherit;padding:0;font-size:14px}#preview ul,#preview ol{margin:16px 0 16px 28px}#preview li{margin:8px 0;line-height:1.7;color:#374151}#preview li input[type=checkbox]{margin-right:8px}#preview blockquote{border-left:4px solid #1a1a2e;margin:20px 0;padding:16px 24px;background:#f9fafb;color:#4b5563;border-radius:0 10px 10px 0}#preview blockquote p{margin:0}#preview a{color:#2563eb;text-decoration:none}#preview a:hover{text-decoration:underline}#preview img{max-width:100%;border-radius:10px;margin:20px 0}#preview table{border-collapse:collapse;width:100%;margin:20px 0}#preview th,#preview td{border:1px solid #e5e7eb;padding:12px 16px;text-align:left}#preview th{background:#f9fafb;font-weight:600;color:#1a1a2e}#preview hr{border:none;border-top:2px solid #e5e7eb;margin:32px 0}body.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}body.resizing #editor,body.resizing #preview{pointer-events:none}#guide-btn{width:auto;padding:0 12px;gap:6px}.modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal[hidden]{display:none}.modal-content{background:#fff;border-radius:16px;width:100%;max-width:800px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px #00000040}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e5e5e5}.modal-header h2{font-size:20px;color:#1a1a2e}.modal-close{width:36px;height:36px;border:none;background:#f3f4f6;border-radius:8px;font-size:24px;cursor:pointer;color:#666;display:flex;align-items:center;justify-content:center;transition:all .15s}.modal-close:hover{background:#e5e5e5;color:#1a1a2e}.modal-body{display:flex;flex:1;overflow:hidden}.guide-nav{width:180px;padding:16px;border-right:1px solid #e5e5e5;display:flex;flex-direction:column;gap:4px;overflow-y:auto;flex-shrink:0}.guide-nav a{padding:10px 14px;color:#555;text-decoration:none;border-radius:8px;font-size:14px;transition:all .15s}.guide-nav a:hover{background:#f3f4f6;color:#1a1a2e}.guide-content{flex:1;padding:24px;overflow-y:auto}.guide-content section{margin-bottom:32px;scroll-margin-top:20px}.guide-content h3{font-size:20px;color:#1a1a2e;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #e5e5e5}.guide-content h4{font-size:16px;color:#374151;margin:16px 0 8px}.guide-content p{color:#555;line-height:1.7;margin:10px 0}.guide-content .example{background:#1e1e2e;border-radius:10px;margin:12px 0;overflow:hidden}.guide-content .example pre{margin:0;padding:16px;overflow-x:auto}.guide-content .example code{color:#f8f8f2;font-family:SF Mono,Monaco,monospace;font-size:13px;background:none}.guide-content code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-family:SF Mono,Monaco,monospace;font-size:13px;color:#e11d48}.guide-content table{width:100%;border-collapse:collapse;margin:12px 0}.guide-content th,.guide-content td{padding:10px 14px;border:1px solid #e5e5e5;text-align:left}.guide-content th{background:#f9fafb;font-weight:600;color:#1a1a2e}.guide-content kbd{background:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;padding:2px 6px;font-family:SF Mono,Monaco,monospace;font-size:12px;box-shadow:0 1px 2px #0000001a}@media(max-width:768px){.toolbar{padding:6px 8px;gap:2px}.toolbar-divider{display:none}.toolbar button{width:28px;height:28px}main{flex-direction:column}.resizer{width:100%;height:6px;cursor:row-resize}.panel{min-width:unset;min-height:200px}.guide-nav{display:none}.modal-content{max-height:90vh}.guide-content{padding:16px}}