:root{--bg-primary: #ffffff;--bg-secondary: #f3f3f3;--bg-editor: #1e1e2e;--text-primary: #333333;--text-secondary: #717171;--text-editor: #cdd6f4;--border-color: #e5e5e5;--accent: #007acc;--toolbar-bg: #f8f8f8;--toolbar-border: #e5e5e5;--btn-bg: transparent;--btn-hover: rgba(0,0,0,.06);--btn-text: #505050;--panel-header-bg: #f3f3f3;--tab-active-border: var(--accent);--toast-bg: rgba(30,30,30,.92);--toast-text: #fff;--divider-color: #e5e5e5;--divider-hover: var(--accent);--preview-bg: #ffffff;--preview-bg-checker: #e8e8e8;--error-color: #f14c4c;--error-bg: #fff0f0;--scrollbar-thumb: rgba(0,0,0,.15);--toggle-bg: #ccc;--toggle-active: var(--accent);--modal-bg: #ffffff;--modal-overlay: rgba(0,0,0,.4);--kbd-bg: #f0f0f0;--kbd-border: #d4d4d4;--tour-bg: #1e1e1e;--tour-text: #fff;--tour-arrow: #1e1e1e;--statusbar-bg: #007acc;--statusbar-text: #fff}[data-theme=dark]{--bg-primary: #1e1e1e;--bg-secondary: #252526;--bg-editor: #1e1e1e;--text-primary: #cccccc;--text-secondary: #858585;--border-color: #3c3c3c;--accent: #0098ff;--toolbar-bg: #323233;--toolbar-border: #3c3c3c;--btn-bg: transparent;--btn-hover: rgba(255,255,255,.08);--btn-text: #cccccc;--panel-header-bg: #252526;--tab-active-border: var(--accent);--toast-bg: rgba(0,122,204,.9);--toast-text: #fff;--divider-color: #3c3c3c;--divider-hover: var(--accent);--preview-bg: #1e1e1e;--preview-bg-checker: #2d2d2d;--error-color: #f48771;--error-bg: #332222;--scrollbar-thumb: rgba(255,255,255,.15);--toggle-bg: #4a4a4a;--toggle-active: var(--accent);--modal-bg: #252526;--modal-overlay: rgba(0,0,0,.6);--kbd-bg: #333333;--kbd-border: #4a4a4a;--tour-bg: var(--accent);--tour-text: #fff;--tour-arrow: var(--accent);--statusbar-bg: #007acc;--statusbar-text: #fff}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Outfit,system-ui,sans-serif;background:var(--bg-primary);color:var(--text-primary);height:100vh;display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:35px;background:var(--toolbar-bg);border-bottom:1px solid var(--toolbar-border);flex-shrink:0;gap:8px;overflow:visible;position:relative;z-index:100;-webkit-app-region:drag}.toolbar__title{font-size:13px;font-weight:500;margin:0;white-space:nowrap;display:flex;align-items:center;gap:8px;color:var(--text-primary);-webkit-app-region:drag}.toolbar__title .toolbar__logo{color:var(--accent);flex-shrink:0;width:1em;height:1em}.toolbar__title-text{letter-spacing:.02em}.toolbar__spacer{flex:1}.toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--text-secondary);border-radius:4px;cursor:pointer;transition:background .1s,color .1s;flex-shrink:0;-webkit-app-region:no-drag}.toolbar-btn:hover{background:var(--btn-hover);color:var(--text-primary)}.toolbar-btn.active{color:var(--accent)}.btn-cmdk{display:inline-flex;align-items:center;gap:8px;padding:3px 10px 3px 8px;height:24px;font-size:12px;color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;min-width:180px;transition:border-color .15s;-webkit-app-region:no-drag;font-family:inherit}.btn-cmdk:hover{border-color:var(--accent)}.btn-cmdk__text{flex:1;text-align:left;font-size:11px;opacity:.7}.btn-cmdk kbd{font-size:10px;padding:0 4px;border-radius:3px;background:transparent;border:1px solid var(--border-color);box-shadow:none;color:var(--text-secondary);line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,sans-serif}.btn-cmdk svg{flex-shrink:0;opacity:.5}.menubar{display:flex;align-items:center;gap:0;height:100%;margin-left:4px;-webkit-app-region:no-drag}.menubar__item{position:relative;height:100%;display:flex;align-items:center}.menubar__trigger{display:flex;align-items:center;height:100%;padding:0 8px;border:none;background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;border-radius:0;transition:background .05s,color .05s;white-space:nowrap;font-family:inherit}.menubar__trigger:hover,.menubar__item.open .menubar__trigger{background:var(--btn-hover);color:var(--text-primary)}.menubar__dropdown{display:none;position:absolute;top:100%;left:0;background:var(--modal-bg);border:1px solid var(--border-color);border-radius:0 0 6px 6px;box-shadow:0 6px 20px #0000002e;min-width:220px;z-index:1000;padding:4px 0;flex-direction:column}.menubar__item.open .menubar__dropdown{display:flex}.menubar__dropdown button[data-menu-action]{display:flex;align-items:center;gap:8px;width:100%;border:none;background:transparent;padding:5px 24px 5px 28px;font-size:12px;color:var(--text-primary);cursor:pointer;text-align:left;white-space:nowrap;border-radius:0;transition:background .05s;position:relative;font-family:inherit;line-height:1.5}.menubar__dropdown button[data-menu-action]:hover{background:var(--accent);color:#fff}.menubar__dropdown button[data-menu-action]:hover kbd{color:#ffffffb3}.menubar__dropdown button[data-menu-action]:hover svg{color:#ffffffe6}.menubar__dropdown button[data-menu-action]>span{flex:1;display:flex;align-items:center;gap:6px}.menubar__dropdown button[data-menu-action]>span>svg{flex-shrink:0;opacity:.6}.menubar__dropdown button[data-menu-action]:hover>span>svg{opacity:1}.menubar__dropdown button[data-menu-action]>kbd{font-size:10px;color:var(--text-secondary);margin-left:auto;background:transparent;border:none;box-shadow:none;padding:0}.menubar__dropdown button.has-check:before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:12px;height:12px}.menubar__dropdown button.has-check.active:before{content:"✓";font-size:11px;color:var(--text-primary);display:flex;align-items:center;justify-content:center}.menubar__dropdown button.has-check.active:hover:before{color:#fff}.menubar__hotkey{font-size:9px;opacity:.4;margin-left:2px;text-decoration:underline;text-underline-offset:1px}.menubar__trigger:hover .menubar__hotkey,.menubar__item.open .menubar__hotkey{opacity:.6}.menubar__sep{height:1px;background:var(--border-color);margin:4px 0}.menu-github-star{font-size:11px;color:var(--text-secondary);opacity:.5;margin-left:auto;padding-right:4px}.menubar__dropdown button[data-menu-action]:hover .menu-github-star{color:#ffffffbf;opacity:1}.menubar__label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);padding:4px 28px 2px;pointer-events:none}.menubar__hint{font-size:10px;color:var(--text-secondary);opacity:.7;padding:2px 28px 4px;pointer-events:none;font-style:italic}.menubar__row{display:flex;align-items:center;gap:8px;padding:5px 24px 5px 28px;font-size:12px;color:var(--text-primary)}.menubar__row select{font-size:11px;padding:2px 4px;border-radius:3px;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary)}.menubar__row span{flex:1}.menubar__color-input{width:20px;height:16px;padding:0;border:1px solid var(--border-color);border-radius:3px;cursor:pointer;margin-left:auto;flex-shrink:0;background:transparent}.settings-popover{position:relative}.settings-popover__menu{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--modal-bg);border:1px solid var(--border-color);border-radius:6px;box-shadow:0 4px 16px #00000026;min-width:200px;z-index:1000;padding:6px;flex-direction:column;gap:2px}.settings-popover__menu.open{display:flex}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:4px;gap:12px}.settings-label{font-size:12px;color:var(--text-primary);white-space:nowrap}.settings-sep{height:1px;background:var(--border-color);margin:3px 0}.settings-action-btn{width:100%;justify-content:flex-start;border:none;background:transparent;border-radius:4px;padding:6px 4px;font-size:12px;color:var(--text-primary);gap:8px}.settings-action-btn:hover{background:var(--btn-hover)}.context-menu{position:fixed;background:var(--modal-bg);border:1px solid var(--border-color);border-radius:6px;box-shadow:0 4px 16px #0000002e;padding:4px;z-index:2000;min-width:180px;display:flex;flex-direction:column;gap:1px}.context-menu__item{display:flex;align-items:center;gap:10px;padding:6px 12px;font-size:12px;color:var(--text-primary);border-radius:4px;cursor:pointer;border:none;background:transparent;width:100%;text-align:left;white-space:nowrap}.context-menu__item:hover{background:var(--btn-hover)}.context-menu__item svg{flex-shrink:0;color:var(--text-secondary)}.context-menu__sep{height:1px;background:var(--border-color);margin:2px 0}.context-menu__label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);padding:4px 12px 2px}.toolbar__sep{width:1px;height:16px;background:var(--border-color);flex-shrink:0;margin:0 4px;align-self:center}select,button{padding:4px 8px;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--btn-text);font-size:12px;cursor:pointer;transition:background .1s,border-color .1s,color .1s;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;line-height:1;font-family:inherit}button:hover{background:var(--btn-hover)}button:active{opacity:.85}button.success{border-color:#4caf50;color:#4caf50}.btn-group{display:flex;gap:2px}.btn-icon{padding:4px 6px;background:transparent;border:none;color:var(--text-secondary)}.btn-icon:hover{background:var(--btn-hover);color:var(--text-primary)}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);padding:6px 16px;font-size:12px}.btn-primary:hover{opacity:.9;background:var(--accent)}.btn-tiny{padding:2px 5px;font-size:11px;border-radius:3px;background:transparent;border-color:transparent;color:var(--text-secondary);border:none}.btn-tiny:hover{background:var(--btn-hover)}.toggle{display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer;user-select:none;color:var(--btn-text);white-space:nowrap}.toggle input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.toggle__track{position:relative;width:30px;height:17px;background:var(--toggle-bg);border-radius:9px;transition:background .2s;flex-shrink:0}.toggle__thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.toggle input:checked~.toggle__track{background:var(--toggle-active)}.toggle input:checked~.toggle__track .toggle__thumb{transform:translate(13px)}.editor-layout{display:flex;flex:1;overflow:hidden;min-height:0}.panel{display:flex;flex-direction:column;min-width:0;overflow:hidden}.panel--editor,.panel--preview{flex:1 1 50%}.panel__tab-bar{display:flex;align-items:center;height:35px;background:var(--panel-header-bg);border-bottom:1px solid var(--border-color);flex-shrink:0;padding:0;gap:0;overflow:hidden}.panel__tab{display:flex;align-items:center;gap:6px;padding:0 12px;height:100%;font-size:12px;color:var(--text-secondary);border-right:1px solid var(--border-color);white-space:nowrap;flex-shrink:0;cursor:default;position:relative}.panel__tab svg{opacity:.6;flex-shrink:0}.panel__tab--active{color:var(--text-primary);background:var(--bg-primary)}.panel__tab--active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--bg-primary)}.panel__tab-spacer{flex:1}.panel__status{font-size:11px;font-weight:400;color:var(--text-secondary);padding-right:12px;opacity:.7;white-space:nowrap}#editor-container{flex:1;overflow:hidden;display:flex;flex-direction:column}#editor-container .cm-editor{flex:1;height:100%}#editor-container .cm-scroller{overflow:auto}#divider{width:1px;background:var(--border-color);cursor:col-resize;flex-shrink:0;transition:background .15s;position:relative}#divider:before{content:"";position:absolute;inset:0 -3px;z-index:1}#divider:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1px;height:24px;border-radius:1px;background:var(--text-secondary);opacity:0;transition:opacity .15s}#divider:hover,#divider.divider--active{background:var(--accent)}#divider:hover:after,#divider.divider--active:after{opacity:0}.preview-viewport{flex:1;overflow:hidden;position:relative;transition:background .2s,background-color .2s;cursor:grab}.preview-viewport:active{cursor:grabbing}.preview-viewport.bg-white{background:#fff}.preview-viewport.bg-black{background:#1a1a1a}.preview-viewport.bg-checker{background-image:linear-gradient(45deg,var(--preview-bg-checker) 25%,transparent 25%),linear-gradient(-45deg,var(--preview-bg-checker) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--preview-bg-checker) 75%),linear-gradient(-45deg,transparent 75%,var(--preview-bg-checker) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:var(--preview-bg)}.preview-viewport.bg-grid{background-color:#fff;background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}[data-theme=dark] .preview-viewport.bg-grid{background-color:#1e1e1e;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}.preview-container{position:absolute;top:0;left:0;min-width:100%;min-height:100%;padding:24px;display:flex;align-items:center;justify-content:center;transform-origin:0 0;will-change:transform;user-select:none}.preview-container svg{display:block;max-width:none;height:auto}.mermaid-handDrawn,.mermaid-handDrawn *{font-family:var(--mermaid-font, inherit)!important}.zoom-label{font-size:11px;color:var(--text-secondary);min-width:32px;text-align:center;font-variant-numeric:tabular-nums}.render-status{font-size:11px;font-weight:400;opacity:0;transition:opacity .2s;color:var(--text-secondary);padding-right:8px;white-space:nowrap}.render-status.visible{opacity:1}.render-status.rendering{color:var(--accent)}.render-status.error{color:var(--error-color)}.render-status.ok{color:#4caf50}.error-banner{margin:16px;border-radius:6px;border:1px solid var(--error-color);background:var(--error-bg);overflow:hidden}.error-banner__header{display:flex;align-items:center;gap:7px;padding:8px 12px;background:var(--error-color);color:#fff;font-size:12px;font-weight:600}.error-banner__line{margin-left:4px;opacity:.85;font-weight:400;font-size:11px}.error-banner__goto{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;border-radius:3px;padding:1px 6px;font-size:11px;transition:background .15s}.error-banner__goto:hover{background:#ffffff59}.error-banner__hint{padding:8px 14px;font-size:12px;color:var(--text-primary);background:#f14c4c0f;border-bottom:1px solid var(--border-color)}.error-banner__close{margin-left:auto;background:none;border:none;cursor:pointer;color:#fff;padding:2px;display:flex;align-items:center;opacity:.8;border-radius:3px}.error-banner__close:hover{opacity:1;background:#fff3}.error-banner__msg{color:var(--error-color);font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:12px;white-space:pre-wrap;margin:0;padding:12px 14px;overflow:auto;max-height:180px;border-bottom:1px solid var(--border-color)}.error-banner__tip{padding:8px 14px;font-size:11px;color:var(--text-secondary)}.placeholder{color:var(--text-secondary);font-size:13px;text-align:center;padding:40px;opacity:.5;line-height:1.8}.placeholder small{font-size:11px}.toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%) translateY(8px);padding:8px 16px;background:var(--toast-bg);color:var(--toast-text);border-radius:6px;font-size:12px;opacity:0;transition:opacity .15s,transform .15s;pointer-events:none;z-index:5000;box-shadow:0 4px 16px #0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.modal-overlay{position:fixed;inset:0;background:var(--modal-overlay);display:flex;align-items:center;justify-content:center;z-index:500;opacity:0;pointer-events:none;transition:opacity .15s}.modal-overlay.open{opacity:1;pointer-events:all}.modal{background:var(--modal-bg);border-radius:8px;width:520px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px);display:flex;flex-direction:column;box-shadow:0 8px 32px #00000040;border:1px solid var(--border-color);transform:translateY(8px);transition:transform .15s}.modal-overlay.open .modal{transform:translateY(0)}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid var(--border-color);flex-shrink:0}.modal__header h2{margin:0;font-size:14px;font-weight:600}.modal__body{overflow-y:auto;padding:16px;flex:1}.modal__footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border-color);flex-shrink:0}.save-dialog__modal{width:380px;overflow-x:hidden}.save-dialog__body{display:flex;gap:12px;padding:20px 16px;overflow-x:hidden}.save-dialog__option{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 16px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);cursor:pointer;transition:border-color .1s,background .1s;font-family:inherit;color:var(--text-primary)}.save-dialog__option:hover{border-color:var(--accent);background:var(--btn-hover)}.save-dialog__option svg{color:var(--accent);opacity:.85}.save-dialog__option-title{font-size:18px;font-weight:700;letter-spacing:.5px}.save-dialog__option-desc{font-size:11px;color:var(--text-secondary);text-align:center;line-height:1.4}.help-section{margin-bottom:16px}.help-section:last-child{margin-bottom:0}.help-section h3{font-size:11px;font-weight:600;margin:0 0 8px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.help-section p{margin:0;font-size:12px;line-height:1.7;color:var(--text-primary)}.help-table{width:100%;border-collapse:collapse;font-size:12px}.help-table td{padding:4px 0;border-bottom:1px solid var(--border-color)}.help-table td:first-child{color:var(--text-primary)}.help-table td:last-child{text-align:right;white-space:nowrap}.help-table tr:last-child td{border-bottom:none}kbd{display:inline-block;padding:1px 5px;font-size:10px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:var(--kbd-bg);border:1px solid var(--kbd-border);border-radius:3px;box-shadow:0 1px 0 var(--kbd-border)}.tour-overlay{position:fixed;inset:0;z-index:9000;pointer-events:none}.tour-curtain{position:fixed;background:#00000094;pointer-events:all;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:9001}.tour-highlight{position:fixed;border-radius:6px;outline:2px solid rgba(255,255,255,.35);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:9002;pointer-events:none}.tour-tooltip{position:fixed;z-index:9003;background:var(--tour-bg);color:var(--tour-text);border-radius:8px;padding:14px 16px;width:280px;box-shadow:0 8px 32px #0006;transition:top .3s cubic-bezier(.4,0,.2,1),left .3s cubic-bezier(.4,0,.2,1);pointer-events:all;font-family:inherit}@keyframes tour-tooltip-in{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.tour-tooltip.animating{animation:tour-tooltip-in .2s cubic-bezier(.34,1.56,.64,1) forwards}.tour-tooltip__step{font-size:10px;opacity:.6;margin-bottom:6px}.tour-tooltip__title{font-size:13px;font-weight:600;margin-bottom:6px}.tour-tooltip__body{font-size:12px;line-height:1.6;opacity:.9}.tour-tooltip__footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}.tour-btn{padding:4px 12px;border-radius:4px;font-size:11px;cursor:pointer;border:1px solid rgba(255,255,255,.25);background:#ffffff1f;color:var(--tour-text);transition:background .15s}.tour-btn:hover{background:#ffffff38}.tour-btn.primary{background:#ffffffe6;color:var(--tour-bg);border-color:transparent}.tour-btn.primary:hover{background:#fff}.tour-dots{display:flex;gap:4px;align-items:center}.tour-dot{width:5px;height:5px;border-radius:50%;background:#ffffff4d;transition:background .2s}.tour-dot.active{background:#fff;width:14px;border-radius:3px}.theme-dropdown,.bg-dropdown{position:relative;flex-shrink:0;margin-right:4px}.theme-dropdown__trigger,.bg-dropdown__trigger{display:inline-flex;align-items:center;gap:4px;padding:2px 6px 2px 5px;font-size:11px;height:22px;background:transparent;border:1px solid transparent;color:var(--text-secondary);border-radius:3px;cursor:pointer;transition:background .1s,border-color .1s,color .1s;white-space:nowrap;font-family:inherit}.theme-dropdown__trigger:hover,.theme-dropdown.open .theme-dropdown__trigger,.bg-dropdown__trigger:hover,.bg-dropdown.open .bg-dropdown__trigger{background:var(--btn-hover);border-color:var(--border-color);color:var(--text-primary)}.theme-dropdown__trigger svg,.bg-dropdown__trigger svg{flex-shrink:0;opacity:.6}.theme-dropdown__trigger:hover svg,.bg-dropdown__trigger:hover svg{opacity:1}.theme-dropdown__panel,.bg-dropdown__panel{display:none;position:fixed;background:var(--modal-bg);border:1px solid var(--border-color);border-radius:6px;box-shadow:0 6px 20px #0000002e;min-width:140px;z-index:1000;padding:4px 0;flex-direction:column}.theme-dropdown.open .theme-dropdown__panel,.bg-dropdown.open .bg-dropdown__panel{display:flex}.theme-dropdown__panel button,.bg-dropdown__panel button{display:flex;align-items:center;gap:8px;width:100%;border:none;background:transparent;padding:6px 12px;font-size:12px;color:var(--text-primary);cursor:pointer;text-align:left;white-space:nowrap;transition:background .05s;font-family:inherit}.theme-dropdown__panel button:hover,.bg-dropdown__panel button:hover{background:var(--accent);color:#fff}.theme-dropdown__panel button.active,.bg-dropdown__panel button.active{background:var(--btn-hover)}.theme-dropdown__panel button svg,.bg-dropdown__panel button svg{flex-shrink:0;width:13px;height:13px;opacity:.7}.bg-dropdown__trigger .bg-pill__swatch{margin-right:2px}.example-dropdown{position:relative;flex-shrink:0;margin-right:4px}.example-dropdown__trigger{display:inline-flex;align-items:center;gap:4px;padding:2px 6px 2px 5px;font-size:11px;height:22px;background:transparent;border:1px solid transparent;color:var(--text-secondary);border-radius:3px;cursor:pointer;transition:background .1s,border-color .1s,color .1s;white-space:nowrap;font-family:inherit}.example-dropdown__trigger:hover,.example-dropdown.open .example-dropdown__trigger{background:var(--btn-hover);border-color:var(--border-color);color:var(--text-primary)}.example-dropdown__trigger svg{flex-shrink:0;opacity:.6}.example-dropdown__trigger:hover svg{opacity:1}.example-dropdown__panel{display:none;position:fixed;background:var(--modal-bg);border:1px solid var(--border-color);border-radius:6px;box-shadow:0 6px 20px #0000002e;min-width:200px;z-index:1000;padding:4px 0;flex-direction:column;max-height:400px;overflow-y:auto}.example-dropdown.open .example-dropdown__panel{display:flex}.example-dropdown__item{display:flex;align-items:center;gap:8px;width:100%;border:none;background:transparent;padding:6px 12px;font-size:12px;color:var(--text-primary);cursor:pointer;text-align:left;white-space:nowrap;border-radius:0;transition:background .05s;font-family:inherit;line-height:1.4}.example-dropdown__item:hover{background:var(--accent);color:#fff}.example-dropdown__item:hover svg{color:#ffffffe6}.example-dropdown__item svg{flex-shrink:0;width:14px;height:14px;color:var(--text-secondary)}.example-dropdown__item span{flex:1}.tab-bar__sep{width:1px;height:14px;background:var(--border-color);margin:0 6px;flex-shrink:0}.bg-pills{display:flex;align-items:center;gap:3px;flex-shrink:0}.bg-pill{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;border-radius:3px;cursor:pointer;transition:background .1s;position:relative}.bg-pill:hover,.bg-pill.active{background:var(--btn-hover)}.bg-pill.active .bg-pill__swatch{box-shadow:0 0 0 1.5px var(--accent)}.bg-pill__swatch{width:12px;height:12px;border-radius:2px;border:1px solid var(--border-color);transition:box-shadow .1s}.bg-pill__swatch--white{background:#fff}.bg-pill__swatch--black{background:#1a1a1a}.bg-pill__swatch--checker{background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 50%/8px 8px}.bg-pill__swatch--grid{background:#fff;background-image:linear-gradient(rgba(0,0,0,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.15) 1px,transparent 1px);background-size:4px 4px}[data-theme=dark] .bg-pill__swatch--checker{background:repeating-conic-gradient(#555 0% 25%,#333 0% 50%) 50%/8px 8px}[data-theme=dark] .bg-pill__swatch--grid{background:#333;background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);background-size:4px 4px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{border-radius:3px;background:var(--scrollbar-thumb)}::-webkit-scrollbar-track{background:transparent}.mobile-tabs,.toolbar__mobile-more{display:none}.mobile-overflow-menu{display:none;position:fixed;inset:0;z-index:2000}.mobile-overflow-menu__backdrop{position:absolute;inset:0;background:var(--modal-overlay)}.mobile-overflow-menu__panel{position:absolute;top:40px;right:8px;background:var(--modal-bg);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 16px #0003;min-width:200px;padding:4px;display:flex;flex-direction:column;gap:1px}.mobile-overflow-menu.open{display:block}.mobile-overflow-menu__item{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:14px;color:var(--text-primary);border-radius:6px;cursor:pointer;border:none;background:transparent;width:100%;text-align:left;min-height:48px;transition:all .2s ease}.mobile-overflow-menu__item:hover{background:var(--btn-hover);transform:translate(4px)}.mobile-overflow-menu__item:active{background:#007acc1a;transform:translate(2px)}.mobile-overflow-menu__item svg{flex-shrink:0;color:var(--text-secondary)}.mobile-overflow-menu__sep{height:1px;background:var(--border-color);margin:3px 0}.floating-zoom{position:absolute;bottom:8px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:1px;padding:2px 4px;background:var(--modal-bg);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 1px 8px #00000014;z-index:10;opacity:.4;transition:opacity .2s}.floating-zoom:hover,.preview-viewport:hover .floating-zoom{opacity:1}.floating-zoom .btn-tiny{padding:3px 5px}.floating-zoom .zoom-label{font-size:10px;min-width:32px;text-align:center;font-variant-numeric:tabular-nums;color:var(--text-secondary);user-select:none}.floating-zoom .floating-zoom__sep{width:1px;height:12px;background:var(--border-color);margin:0 2px;flex-shrink:0}.cmd-palette-overlay{position:fixed;inset:0;background:#00000059;z-index:8000;display:flex;align-items:flex-start;justify-content:center;padding-top:0;opacity:0;pointer-events:none;transition:opacity .1s}.cmd-palette-overlay.open{opacity:1;pointer-events:all}.cmd-palette{width:500px;max-width:calc(100vw - 32px);max-height:min(60vh,400px);background:var(--modal-bg);border:1px solid var(--border-color);border-radius:6px;box-shadow:0 8px 32px #0003;display:flex;flex-direction:column;overflow:hidden;margin-top:0;transform:translateY(-4px);transition:transform .1s}.cmd-palette-overlay.open .cmd-palette{transform:translateY(0)}.cmd-palette__input-wrap{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border-color)}.cmd-palette__input-wrap svg{flex-shrink:0;color:var(--text-secondary);opacity:.6}.cmd-palette__input{flex:1;border:none;background:transparent;font-size:13px;font-family:inherit;color:var(--text-primary);outline:none;line-height:1.4}.cmd-palette__input::placeholder{color:var(--text-secondary);opacity:.5}.cmd-palette__list{flex:1;overflow-y:auto;padding:4px;scrollbar-width:thin}.cmd-palette__group-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);padding:6px 8px 3px}.cmd-palette__item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:4px;cursor:pointer;border:none;background:transparent;width:100%;text-align:left;font-size:12px;color:var(--text-primary);transition:background .05s}.cmd-palette__item:hover,.cmd-palette__item.active{background:var(--btn-hover)}.cmd-palette__item svg{flex-shrink:0;color:var(--text-secondary);width:14px;height:14px}.cmd-palette__item-label{flex:1}.cmd-palette__item-kbd{display:flex;gap:2px;flex-shrink:0}.cmd-palette__item-kbd kbd{font-size:9px;padding:0 4px;border-radius:3px;background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:none;color:var(--text-secondary);line-height:1.5}.cmd-palette__footer{display:flex;align-items:center;gap:12px;padding:6px 12px;border-top:1px solid var(--border-color);font-size:10px;color:var(--text-secondary)}.cmd-palette__footer kbd{font-size:9px;padding:0 3px;box-shadow:none}.cmd-palette__empty{padding:20px 16px;text-align:center;color:var(--text-secondary);font-size:12px;opacity:.6}@media(max-width:768px){.mobile-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--border-color);background:var(--panel-header-bg)}.mobile-tab{flex:1;padding:16px 12px;font-size:14px;font-weight:600;border:none;border-radius:0;background:transparent;color:var(--text-secondary);border-bottom:3px solid transparent;cursor:pointer;transition:all .2s ease;min-height:48px;display:flex;align-items:center;justify-content:center;position:relative}.mobile-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:#007acc0d}.mobile-tab:hover{background:var(--btn-hover);transform:translateY(-1px)}.mobile-tab:active{transform:translateY(0);background:#007acc1a}.panel--editor.mobile-hidden,.panel--preview.mobile-hidden,#divider{display:none}.toolbar{height:36px;padding:0 8px;flex-wrap:nowrap}.menubar,.btn-cmdk{display:none}.toolbar__mobile-more{display:inline-flex!important}.editor-layout{flex-direction:column}#divider{width:100%;height:4px;cursor:row-resize}.floating-zoom{bottom:6px;padding:2px 4px}.cmd-palette{width:calc(100vw - 16px);max-height:50vh}.theme-dropdown__panel,.bg-dropdown__panel,.example-dropdown__panel{min-width:180px;max-width:calc(100vw - 16px)}.theme-dropdown__panel button,.bg-dropdown__panel button,.example-dropdown__item{padding:12px 16px;font-size:14px;min-height:48px}.theme-dropdown__trigger,.bg-dropdown__trigger,.example-dropdown__trigger{padding:6px 10px;font-size:12px;height:32px}}@font-face{font-family:Outfit Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/MermZen/assets/outfit-latin-ext-wght-normal-DdQaqQ.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Outfit Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/MermZen/assets/outfit-latin-wght-normal-Bc-8i8.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(data:font/woff2;base64,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) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/MermZen/assets/jetbrains-mono-cyrillic-wght-normal-D73Blb.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/MermZen/assets/jetbrains-mono-greek-wght-normal-Bw9x6K.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/MermZen/assets/jetbrains-mono-vietnamese-wght-normal-Bt-aOZ.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/MermZen/assets/jetbrains-mono-latin-ext-wght-normal-DBQx-q.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/MermZen/assets/jetbrains-mono-latin-wght-normal-B9CIFX.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}