/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */*,:before,:after{box-sizing:border-box}html{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}:root{--color-bg: #fdfbf7;--color-bg-warm: #faf6f0;--color-bg-card: rgba(255, 255, 255, .85);--color-text: #2d3436;--color-text-secondary: #636e72;--color-text-muted: #9ca3af;--color-sage: #8fb38f;--color-sage-light: #b8d4b8;--color-sage-dark: #6a9a6a;--color-coral: #f4a261;--color-coral-light: #f8c9a0;--color-lavender: #c9b3e8;--color-lavender-light: #e0d4f5;--color-sky: #a8d5e2;--color-rose: #f5c6c6;--gradient-primary: linear-gradient(135deg, var(--color-sage) 0%, var(--color-sky) 100%);--gradient-warm: linear-gradient(135deg, var(--color-coral-light) 0%, var(--color-rose) 100%);--gradient-soft: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-warm) 100%);--shadow-soft: 0 1px 3px rgba(0, 0, 0, .08);--shadow-medium: 0 2px 8px rgba(0, 0, 0, .1);--font-display: "Fraunces", Georgia, serif;--font-body: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-xl: 32px;--transition-fast: .15s ease-out;--transition-normal: .3s ease-out;--transition-slow: .5s ease-out}body{overflow:hidden;overscroll-behavior:none;background:var(--gradient-soft);font-family:var(--font-body);color:var(--color-text);line-height:1.6}#app{position:relative;z-index:1}.container{display:flex;height:100vh;width:100vw;overflow:hidden;contain:layout size}.editor-pane{flex:0 0 30%;min-width:0;display:none;flex-direction:column;contain:layout style;will-change:flex-basis;background:var(--color-bg-card);overflow:hidden}.editor-pane.visible{display:flex}.preview-pane{flex:1;min-width:0;overflow:hidden;position:relative;contain:layout style;content-visibility:auto;background-color:var(--color-bg-card);background-image:radial-gradient(circle,var(--color-sage-light) 1px,transparent 1px);background-size:20px 20px}#mermaid-preview{display:inline-block;width:100%;height:100%}#mermaid-preview svg{width:100%;height:100%;max-width:100%!important}.editor{width:100%;flex:1;resize:none;border:none;font-family:var(--font-mono)}.resize-handle{width:4px;background:var(--color-sage-light);cursor:col-resize;transition:background var(--transition-fast)}.resize-handle:hover{background:var(--color-sage)}.status-bar{position:relative;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--gradient-primary);color:#fff;font-size:13px;font-weight:500;gap:12px}.status-text{color:#fff;font-size:13px;flex-grow:1;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.1)}.button{padding:8px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-size:14px;font-family:var(--font-body);font-weight:500;background:#fff;color:var(--color-text);transition:background var(--transition-fast);aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;min-width:40px;box-shadow:var(--shadow-soft)}.button:hover{background:var(--color-bg-warm)}#settings-btn{display:flex;align-items:center;justify-content:center;padding:8px;background:#fff3;border:none;border-radius:var(--radius-md);color:#fff;transition:all var(--transition-fast)}#settings-btn:hover{background:#ffffff4d}#settings-btn svg{width:20px;height:20px}.floating-controls{position:fixed;bottom:28px;right:28px;display:flex;gap:10px;z-index:100;transform:translateZ(0)}.zoom-button{width:36px;height:36px;padding:0;font-size:16px;font-weight:600;border-radius:50%;background:#fff;color:var(--color-sage-dark);border:1px solid var(--color-sage-light);box-shadow:var(--shadow-soft);transition:background var(--transition-fast),color var(--transition-fast)}.zoom-button:hover{background:var(--color-sage);color:#fff}.skill-button{width:36px;height:36px;padding:0;border-radius:50%;background:var(--color-sage);color:#fff;border:none;box-shadow:var(--shadow-soft);transition:background var(--transition-fast)}.skill-button:hover{background:var(--color-sage-dark)}.input-area{flex-grow:1;position:relative;display:flex;align-items:center;gap:10px}.input-area input{flex:1;height:42px;border:2px solid rgba(255,255,255,.3);resize:none;padding:10px 16px;font-size:14px;font-family:var(--font-body);outline:none;box-sizing:border-box;border-radius:var(--radius-md);background:#fffffff2;color:var(--color-text);transition:all var(--transition-fast)}.input-area input::placeholder{color:var(--color-text-muted)}.input-area input:focus{border-color:#fff;box-shadow:0 0 0 4px #fff3}.preset-button{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;background:#fff3;border:2px solid rgba(255,255,255,.3);border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.preset-button:hover{background:#ffffff4d;border-color:#ffffff80}.preset-card{position:absolute;top:calc(100% + 12px);left:0;right:0;background:#fff;border:1px solid rgba(143,179,143,.2);border-radius:var(--radius-lg);box-shadow:var(--shadow-medium);z-index:1000;max-height:400px;overflow-y:auto;animation:slideUp .2s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.preset-card.hidden{display:none}.preset-header{padding:20px 20px 12px;border-bottom:1px solid rgba(143,179,143,.15)}.preset-header h3{margin:0;font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--color-text);font-optical-sizing:auto}.preset-grid{padding:12px;display:grid;gap:6px}.preset-item{display:flex;flex-direction:column;align-items:flex-start;padding:12px 16px;background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast);text-align:left;width:100%;box-sizing:border-box}.preset-item:hover{background:var(--color-sage-light)}.preset-item-title{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--color-text);margin-bottom:4px}.preset-item-description{font-size:13px;color:var(--color-text-secondary);line-height:1.5}.settings-dialog{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid rgba(143,179,143,.2);border-radius:var(--radius-lg);padding:28px;z-index:1000;box-shadow:var(--shadow-medium);transform:translateY(0);transition:transform var(--transition-normal),opacity var(--transition-normal);max-width:420px;animation:slideUp .25s ease-out}.settings-dialog.hidden{display:none;transform:translateY(-10px);opacity:0}.settings-content{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-hint{color:var(--color-text-secondary);font-size:12px;margin-top:4px;line-height:1.5}.settings-content label{font-family:var(--font-body);font-weight:600;color:var(--color-text);font-size:14px;letter-spacing:.01em}.settings-content input,.settings-content select{padding:14px 16px;border:2px solid rgba(143,179,143,.25);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:14px;font-family:var(--font-body);font-weight:400;transition:all var(--transition-fast)}.settings-content select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a9a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center;padding-right:44px;cursor:pointer}.settings-content input:focus,.settings-content select:focus{border-color:var(--color-sage);outline:none;box-shadow:0 0 0 4px #8fb38f26;background-color:#fff}.settings-content input:hover,.settings-content select:hover{border-color:var(--color-sage-light)}.save-button{margin-top:8px;width:100%;padding:12px 24px;background:var(--color-sage);color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;font-family:var(--font-body);font-weight:600;cursor:pointer;transition:background var(--transition-fast)}.save-button:hover{background:var(--color-sage-dark)}.settings-saved-message{position:fixed;bottom:24px;right:24px;background:var(--color-sage);color:#fff;padding:16px 24px;border-radius:var(--radius-md);font-size:14px;font-weight:500;box-shadow:var(--shadow-medium);z-index:10000;animation:slideIn .3s ease-out forwards}.settings-saved-message.fade-out{animation:fadeOut .5s ease-out forwards}@keyframes slideIn{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.error-overlay{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#f4a261f2,#f5c6c6f2);color:var(--color-text);font-size:14px;font-family:var(--font-body);padding:32px;white-space:pre-wrap;align-items:center;justify-content:center;text-align:center;z-index:10;margin:0}.api-key-warning{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--color-coral-light);border:2px solid var(--color-coral);border-radius:var(--radius-md);color:var(--color-text);font-size:13px;width:100%;box-sizing:border-box;height:42px}.api-key-warning svg{flex-shrink:0;color:var(--color-coral)}.api-key-warning span{flex-grow:1;line-height:1.3}.api-key-warning.error-state{background:var(--color-rose);border-color:#e57373}.fix-with-ai-button{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--color-sage);color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;font-family:var(--font-body);font-weight:600;cursor:pointer;transition:background var(--transition-fast);width:100%;height:42px;box-sizing:border-box}.fix-with-ai-button:hover{background:var(--color-sage-dark)}.fix-with-ai-button svg{flex-shrink:0;width:18px;height:18px}.yRemoteSelection{background-color:#c9b3e880}.yRemoteSelectionHead{position:absolute;border-left:var(--color-lavender) solid 2px;border-top:var(--color-lavender) solid 2px;border-bottom:var(--color-lavender) solid 2px;height:100%;box-sizing:border-box}.yRemoteSelectionHead:after{position:absolute;content:" ";border:3px solid var(--color-lavender);border-radius:50%;left:-4px;top:-5px}.mermaid-error-line{background-color:#f4a26126!important;border-left:3px solid var(--color-coral)!important}.mermaid-error-glyph{background-color:var(--color-coral)!important;width:3px!important;border-radius:2px}.monaco-editor .hover-row .mermaid-error-line{background-color:#f4a26133!important}.monaco-editor .lines-content .view-lines .view-line .mermaid-error-line{position:relative}.monaco-editor .squiggly-error-mermaid{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 3' enable-background='new 0 0 6 3' height='3' width='6'%3E%3Cg fill='%23f4a261'%3E%3Cpolygon points='5.5,0 2.5,3 1.1,3 4.1,0'/%3E%3Cpolygon points='4,0 6,2 6,0.6 5.4,0'/%3E%3Cpolygon points='0,2 1,3 2.4,3 0,0.6'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left}.monaco-editor .monaco-hover .mermaid-error-hover{border-left:3px solid var(--color-coral);padding-left:8px;background-color:var(--color-coral-light);color:var(--color-text);font-weight:500}.monaco-editor .lightbulb-glyph{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNSAyLjVDOS41IDEuOTQ3NzIgOS4wNTIyOCAxLjUgOC41IDEuNUM3Ljk0NzcyIDEuNSA3LjUgMS45NDc3MiA3LjUgMi41VjNDNy41IDMuNTUyMjggNy45NDc3MiA0IDguNSA0QzkuMDUyMjggNCA5LjUgMy41NTIyOCA5LjUgM1YyLjVaIiBmaWxsPSIjOGZiMzhmIi8+CjxwYXRoIGQ9Ik0xMy41IDcuNUMxNC4wNTIzIDcuNSAxNC41IDcuMDUyMjggMTQuNSA2LjVDMTQuNSA1Ljk0NzcyIDE0LjA1MjMgNS41IDEzLjUgNS41SDEzQzEyLjQ0NzcgNS41IDEyIDUuOTQ3NzIgMTIgNi41QzEyIDcuMDUyMjggMTIuNDQ3NyA3LjUgMTMgNy41SDEzLjVaIiBmaWxsPSIjOGZiMzhmIi8+CjxwYXRoIGQ9Ik0zLjUgNi41QzMuNSA3LjA1MjI4IDMuOTQ3NzIgNy41IDQuNSA3LjVINUM1LjU1MjI4IDcuNSA2IDcuMDUyMjggNiA2LjVDNiA1Ljk0NzcyIDUuNTUyMjggNS41IDUgNS41SDQuNUMzLjk0NzcyIDUuNSAzLjUgNS45NDc3MiAzLjUgNi41WiIgZmlsbD0iIzhmYjM4ZiIvPgo8cGF0aCBkPSJNNS41IDEwLjVDNS41IDkuMzk1NDMgNi4zOTU0MyA4LjUgNy41IDguNUg5LjVDMTAuNjA0NiA4LjUgMTEuNSA5LjM5NTQzIDExLjUgMTAuNVYxMi41QzExLjUgMTMuMDUyMyAxMS4wNTIzIDEzLjUgMTAuNSAxMy41SDYuNUM1Ljk0NzcyIDEzLjUgNS41IDEzLjA1MjMgNS41IDEyLjVWMTAuNVoiIGZpbGw9IiM4ZmIzOGYiLz4KPHBhdGggZD0iTTcuNSAxM0g5LjVWMTRDOS41IDE0LjU1MjMgOS4wNTIyOCAxNSA4LjUgMTVDNy45NDc3MiAxNSA3LjUgMTQuNTUyMyA3LjUgMTRWMTNaIiBmaWxsPSIjOGZiMzhmIi8+Cjwvc3ZnPg==) no-repeat}.monaco-editor .monaco-action-bar .action-item .action-label.codicon-lightbulb{color:var(--color-sage)!important}.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused{background-color:var(--color-sage-light)!important}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.codicon-lightbulb{color:var(--color-sage)!important}.skill-modal{position:fixed;bottom:84px;right:28px;z-index:1000;animation:slideUp .25s ease-out}.skill-modal.hidden{display:none}.skill-modal-content{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-medium);padding:24px;width:340px;border:1px solid rgba(143,179,143,.2)}.skill-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.skill-modal-header h3{margin:0;font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--color-text)}.skill-modal-close{background:none;border:none;font-size:28px;color:var(--color-text-muted);cursor:pointer;padding:0;line-height:1;transition:color var(--transition-fast);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}.skill-modal-close:hover{color:var(--color-text);background:var(--color-sage-light)}.skill-modal-description{margin:0 0 20px;font-size:14px;color:var(--color-text-secondary);line-height:1.6}.skill-modal-actions{display:flex;flex-direction:column;gap:10px}.skill-action-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;border:1px solid var(--color-sage-light);border-radius:var(--radius-sm);background:#fff;color:var(--color-text);font-size:14px;font-family:var(--font-body);font-weight:500;cursor:pointer;transition:background var(--transition-fast)}.skill-action-btn:hover{background:var(--color-bg-warm)}.skill-action-btn.primary{background:var(--color-sage);border:none;color:#fff}.skill-action-btn.primary:hover{background:var(--color-sage-dark)}.skill-action-btn.success{background:var(--color-sage);border-color:var(--color-sage);color:#fff}.skill-modal-hint{margin-top:16px;text-align:center}.skill-modal-hint small{font-size:12px;color:var(--color-text-muted)}.skill-modal-hint code{background:var(--color-bg-warm);padding:3px 8px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11px;color:var(--color-sage-dark)}.share-button{width:36px;height:36px;padding:0;border-radius:50%;background:var(--color-lavender);color:#fff;border:none;box-shadow:var(--shadow-soft);transition:background var(--transition-fast)}.share-button:hover{background:#b8a0d8}.share-modal{position:fixed;bottom:84px;right:28px;z-index:1000;animation:slideUp .25s ease-out}.share-modal.hidden{display:none}.share-modal-content{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-medium);padding:24px;width:320px;border:1px solid rgba(143,179,143,.2)}.share-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.share-modal-header h3{margin:0;font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--color-text)}.share-modal-close{background:none;border:none;font-size:28px;color:var(--color-text-muted);cursor:pointer;padding:0;line-height:1;transition:color var(--transition-fast);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}.share-modal-close:hover{color:var(--color-text);background:var(--color-sage-light)}.share-modal-actions{display:flex;flex-direction:column;gap:10px}.share-action-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border:1px solid var(--color-sage-light);border-radius:var(--radius-sm);background:#fff;color:var(--color-text);font-size:14px;font-family:var(--font-body);font-weight:500;cursor:pointer;transition:background var(--transition-fast)}.share-action-btn:hover{background:var(--color-bg-warm)}.share-action-btn.primary{background:var(--color-sage);border:none;color:#fff}.share-action-btn.primary:hover{background:var(--color-sage-dark)}.share-action-btn.success{background:var(--color-sage);border-color:var(--color-sage);color:#fff}.share-url-preview{margin-top:16px}.share-url-preview.hidden{display:none}.share-url-preview input{width:100%;padding:10px 12px;border:1px solid var(--color-sage-light);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-mono);color:var(--color-text-secondary);background:var(--color-bg);box-sizing:border-box}.share-url-preview input:focus{outline:none;border-color:var(--color-sage)}@media screen and (max-width: 768px){.editor-pane,.resize-handle,.resize-handle-horizontal,.input-area{display:none}.preview-pane{flex:1 1 100%}.floating-controls{bottom:16px;right:16px;gap:8px}.zoom-button,.skill-button{width:40px;height:40px}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-sage-light);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-sage)}::selection{background:var(--color-sage-light);color:var(--color-text)}::-moz-selection{background:var(--color-sage-light);color:var(--color-text)}body.loading{cursor:wait}body.loading *{pointer-events:none}