:root{--bg: #faf9f7;--surface: #ffffff;--surface2: #f4f2ef;--border: #e8e4de;--border2: #d4cfc8;--accent: #b07d4a;--accent2: #6b5fa6;--accent-soft: rgba(176,125,74,.1);--text: #1a1714;--text-muted:#7a7067;--text-dim: #b8b0a5;--green: #2e7d52;--red: #c0392b;--shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);--shadow-lg: 0 8px 40px rgba(0,0,0,.12);--radius: 12px;--font-mono: "JetBrains Mono", monospace;--font-sans: "Inter", sans-serif;--font-serif:"Playfair Display", serif;--font-body: "Lora", serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-sans)}#root{height:100%}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9999;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");opacity:1}.divider{width:1px;height:28px;background:var(--border);flex-shrink:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}body.split-mode .editor-pane{flex:1}body.split-mode .preview-pane{flex:1;display:block}body.preview-mode .editor-pane{display:none}body.preview-mode .preview-pane{flex:1;display:block}body.focus-mode .sidebar{width:0}body.focus-mode .statusbar{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.topbar{height:56px;display:flex;align-items:center;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--border);gap:16px;position:relative;z-index:100;box-shadow:0 1px 0 var(--border),0 2px 8px #0000000a}.topbar:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--accent) 30%,var(--accent2) 70%,transparent);opacity:.35}.logo{font-family:var(--font-serif);font-size:21px;letter-spacing:.02em;color:var(--accent);flex-shrink:0;display:flex;align-items:center;gap:8px}.logo .dot{color:var(--accent2)}.logo small{font-family:var(--font-mono);font-size:9px;color:var(--text-dim);letter-spacing:.2em;text-transform:uppercase;margin-top:2px}.toolbar-group{display:flex;gap:2px}.tb-btn{width:32px;height:32px;background:transparent;border:none;border-radius:6px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;font-family:var(--font-mono);font-weight:500;transition:background .15s,color .15s;position:relative}.tb-btn:hover{background:var(--surface2);color:var(--text)}.tb-btn[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;top:38px;left:50%;transform:translate(-50%);background:var(--text);color:var(--surface);font-family:var(--font-sans);font-size:11px;white-space:nowrap;padding:4px 8px;border-radius:4px;pointer-events:none;z-index:999}.tb-btn svg{width:16px;height:16px}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}.view-toggle{display:flex;gap:2px;background:var(--surface2);border-radius:8px;padding:3px;border:1px solid var(--border)}.view-btn{padding:4px 12px;background:transparent;border:none;border-radius:6px;color:var(--text-muted);cursor:pointer;font-size:12px;font-family:var(--font-mono);letter-spacing:.05em;transition:all .15s}.view-btn.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.btn-pdf,.btn-tutorial{padding:6px 14px;border-radius:8px;border:none;cursor:pointer;font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;transition:all .2s}.btn-pdf{background:var(--accent);color:#fff;font-weight:500;box-shadow:0 2px 8px #b07d4a4d}.btn-pdf:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 4px 16px #b07d4a59}.btn-tutorial{background:transparent;border:1px solid var(--border2);color:var(--text-muted)}.btn-tutorial:hover{border-color:var(--accent2);color:var(--accent2);background:#6b5fa60d}.wc{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);white-space:nowrap}.lang-switcher{display:flex;gap:2px;align-items:center}.lang-btn{padding:3px 8px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;transition:all .15s}.lang-btn.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.lang-btn:hover{border-color:var(--accent);color:var(--accent)}.editor-pane{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.editor-wrap{flex:1;position:relative;overflow:hidden;background:var(--bg)}.editor-textarea{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:transparent;color:var(--text);border:none;outline:none;resize:none;font-family:var(--font-mono);font-size:14px;line-height:1.85;padding:36px 40px;caret-color:var(--accent);-moz-tab-size:2;tab-size:2;letter-spacing:.01em}.editor-textarea::selection{background:#b07d4a26}.editor-textarea::placeholder{color:var(--text-dim);font-style:italic;font-family:var(--font-body)}.editor-wrap:before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--border) 20%,var(--border) 80%,transparent);pointer-events:none}.statusbar{height:26px;display:flex;align-items:center;padding:0 20px;gap:16px;background:var(--surface);border-top:1px solid var(--border);font-family:var(--font-mono);font-size:10px;color:var(--text-dim)}.statusbar .status-item{display:flex;align-items:center;gap:4px}.cursor-pos{color:var(--text-muted)}.status-sep{color:var(--text-dim)}.find-bar{display:none;padding:6px 16px;background:var(--surface);border-top:1px solid var(--border);gap:8px;align-items:center}.find-bar.open{display:flex}.find-input{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;color:var(--text);font-family:var(--font-mono);font-size:13px;outline:none;width:220px}.find-input:focus{border-color:var(--accent)}.preview-pane{flex:1;background:var(--bg);overflow-y:auto;border-left:1px solid var(--border);min-width:0;display:none}.preview-pane.visible{display:block}.preview-content{max-width:780px;margin:0 auto;padding:48px 48px 80px}.preview-content h1,.preview-content h2,.preview-content h3,.preview-content h4,.preview-content h5,.preview-content h6{font-family:var(--font-serif);color:var(--text);margin:2em 0 .6em;line-height:1.25}.preview-content h1{font-size:2.5em;color:#1a1714;border-bottom:2px solid var(--border);padding-bottom:.3em}.preview-content h2{font-size:1.75em;color:#2a2520}.preview-content h3{font-size:1.3em;color:var(--accent2)}.preview-content h4{color:var(--text-muted);font-family:var(--font-sans);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.85em}.preview-content p{line-height:1.85;color:#3a342e;margin:1em 0;font-size:15.5px;font-family:var(--font-body)}.preview-content a{color:var(--accent);text-decoration:underline;text-decoration-color:#b07d4a59}.preview-content a:hover{text-decoration-color:var(--accent)}.preview-content strong{color:var(--text);font-weight:600}.preview-content em{color:#5a4e88;font-style:italic}.preview-content code{font-family:var(--font-mono);background:#f0ede8;color:var(--green);padding:2px 6px;border-radius:4px;font-size:.87em;border:1px solid var(--border)}.preview-content pre{background:#fdfcfb;border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;overflow-x:auto;margin:1.5em 0;box-shadow:var(--shadow)}.preview-content pre code{background:none;color:inherit;padding:0;font-size:13.5px;border:none}.preview-content blockquote{border-left:3px solid var(--accent);margin:1.5em 0;padding:14px 22px;background:#b07d4a0d;border-radius:0 var(--radius) var(--radius) 0;color:var(--text-muted);font-style:italic;font-family:var(--font-body)}.preview-content table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:14px;box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden}.preview-content th{background:var(--text);color:var(--surface);font-family:var(--font-mono);font-weight:500;padding:11px 16px;text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.preview-content td{padding:10px 16px;border-bottom:1px solid var(--border);color:#3a342e;vertical-align:top;font-family:var(--font-body);font-size:14.5px}.preview-content tr:last-child td{border-bottom:none}.preview-content tr:nth-child(2n) td{background:#00000004}.preview-content ul,.preview-content ol{padding-left:1.5em;margin:1em 0;color:#3a342e;font-family:var(--font-body)}.preview-content li{margin:.4em 0;line-height:1.7;font-size:15px}.preview-content ul li::marker{color:var(--accent)}.preview-content ol li::marker{color:var(--accent2);font-family:var(--font-mono);font-size:.85em;font-weight:500}.preview-content hr{border:none;border-top:1px solid var(--border);margin:2.5em 0}.preview-content img{max-width:100%;border-radius:var(--radius);margin:1em 0;box-shadow:var(--shadow-lg)}.preview-content input[type=checkbox]{accent-color:var(--accent);margin-right:6px}.preview-content .mermaid{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin:1.5em 0;text-align:center;overflow-x:auto;box-shadow:var(--shadow)}.sidebar{width:220px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:width .3s ease;overflow:hidden}.sidebar.collapsed{width:0}.sidebar-header{padding:16px 14px 10px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);font-family:var(--font-mono);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.snippet-list{flex:1;overflow-y:auto;padding:8px}.snippet-item{padding:8px 10px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--text-muted);font-family:var(--font-mono);line-height:1.4;transition:all .15s;display:flex;align-items:flex-start;gap:8px}.snippet-item:hover{background:var(--surface2);color:var(--text)}.snippet-item .sn-icon{font-size:14px;flex-shrink:0;margin-top:1px}.snippet-item .sn-label{font-size:11px}.snippet-item .sn-desc{font-size:10px;color:var(--text-dim);margin-top:1px}.diagram-panel{display:none;flex-direction:column;width:280px;background:var(--surface);border-left:1px solid var(--border);overflow:hidden;box-shadow:-4px 0 20px #0000000a}.diagram-panel.open{display:flex}.dp-header{padding:14px 16px;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent2);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--surface2),var(--surface))}.dp-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px}.dp-section{padding:12px;border-bottom:1px solid var(--border)}.dp-section h4{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}.dp-btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.dp-btn{padding:8px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text-muted);cursor:pointer;font-family:var(--font-mono);font-size:11px;text-align:center;transition:all .15s}.dp-btn:hover{border-color:var(--accent2);color:var(--accent2);background:#6b5fa60f}.dp-btn .dp-icon{font-size:18px;display:block;margin-bottom:4px}.table-builder{padding:12px}.table-builder label{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);display:block;margin-bottom:4px}.table-builder input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:6px 10px;color:var(--text);font-family:var(--font-mono);font-size:12px;outline:none;margin-bottom:8px}.table-builder input:focus{border-color:var(--accent)}.insert-table-btn{width:100%;padding:8px;background:var(--accent2);border:none;border-radius:6px;color:#fff;font-family:var(--font-mono);font-size:12px;cursor:pointer;letter-spacing:.05em;transition:filter .2s}.insert-table-btn:hover{filter:brightness(1.15)}.tutorial-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;background:#1a171473;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.tutorial-overlay.open{display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}.tutorial-modal{width:min(860px,95vw);max-height:85vh;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg),0 40px 120px #00000026;animation:slideUp .25s ease}.tutorial-header{padding:24px 28px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#fdfcfb,var(--surface))}.tutorial-header h2{font-family:var(--font-serif);font-size:1.6em;color:var(--text)}.tutorial-header p{font-size:13px;color:var(--text-muted);margin-top:4px;font-family:var(--font-body);font-style:italic}.close-tutorial{width:32px;height:32px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.close-tutorial:hover{color:var(--text);background:var(--border)}.tutorial-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 28px;background:var(--surface)}.ttab{padding:10px 16px;background:transparent;border:none;cursor:pointer;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}.ttab.active{color:var(--accent);border-bottom-color:var(--accent)}.tutorial-body{overflow-y:auto;padding:24px 28px;flex:1;background:var(--bg)}.tutorial-section{display:none}.tutorial-section.active{display:block}.ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ref-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.ref-card-header{padding:8px 14px;background:linear-gradient(135deg,var(--surface2),var(--surface));border-bottom:1px solid var(--border);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-family:var(--font-mono)}.ref-rows{padding:8px}.ref-row{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px 6px;border-radius:4px;cursor:pointer;transition:background .12s;align-items:center}.ref-row:hover{background:var(--surface2)}.ref-row .ref-md{font-family:var(--font-mono);font-size:12px;color:var(--green)}.ref-row .ref-result{font-size:12px;color:var(--text)}.ref-row:after{content:"+ insert";font-size:10px;color:var(--accent);font-family:var(--font-mono);opacity:0;transition:opacity .15s;grid-column:1 / -1;text-align:right}.ref-row:hover:after{opacity:1}.tpl-grid{display:flex;flex-direction:column;gap:6px}.tpl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;cursor:pointer;transition:all .15s;box-shadow:var(--shadow)}.tpl-card:hover{border-color:var(--accent);background:#b07d4a08;transform:translateY(-1px);box-shadow:var(--shadow-lg)}.tpl-card h4{font-size:13px;color:var(--text);margin-bottom:3px;font-family:var(--font-mono);font-weight:500}.tpl-card p{font-size:11px;color:var(--text-muted)}.toast{position:fixed;bottom:40px;right:40px;z-index:9000;background:var(--text);border-radius:10px;padding:12px 18px;font-family:var(--font-mono);font-size:12px;color:var(--surface);display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(10px);transition:all .2s;pointer-events:none;box-shadow:var(--shadow-lg)}.toast.show{opacity:1;transform:translateY(0)}.toast .t-icon{font-size:16px}.watermark{position:fixed;bottom:48px;right:24px;z-index:200;font-family:var(--font-body);font-style:italic;font-size:11px;color:var(--text-dim);letter-spacing:.03em;pointer-events:none;display:flex;align-items:center;gap:5px;opacity:.7}.watermark:before{content:"✦";font-style:normal;font-size:8px;color:var(--accent);opacity:.6}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/.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}