:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.login-page{justify-content:center;align-items:center;min-height:calc(100svh - 120px);padding:40px 20px;display:flex}.login-container{text-align:left;width:100%;max-width:600px}.login-container h1{text-align:center;margin-bottom:32px;font-size:32px}.form-group{margin-bottom:20px}.form-group label{color:var(--text-h);margin-bottom:8px;font-weight:500;display:block}.form-group input,.form-group textarea,.form-group select{border:1px solid var(--border);width:100%;font-size:16px;font-family:var(--sans);background:var(--bg);color:var(--text);box-sizing:border-box;border-radius:6px;padding:10px 12px}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg);outline:none}.input-textarea{resize:vertical;min-height:120px}.length-slider{width:100%}.length-labels{color:var(--text);justify-content:space-between;margin-top:4px;font-size:14px;display:flex}.length-value{color:var(--accent);font-weight:600}.char-types .checkbox-group{grid-template-columns:1fr 1fr;gap:8px;display:grid}.checkbox-label{cursor:pointer;align-items:center;gap:8px;font-size:15px;display:flex}.checkbox-label input[type=checkbox]{width:auto;accent-color:var(--accent)}.generate-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;width:100%;padding:12px 24px;font-size:16px;font-weight:500;transition:opacity .2s}.generate-btn:hover:not(:disabled){opacity:.9}.generate-btn:disabled{opacity:.5;cursor:not-allowed}.password-display{background:var(--code-bg);border-radius:6px;flex-direction:column;gap:12px;margin-top:20px;padding:16px;display:flex}.password-text{word-break:break-all;font-size:16px;line-height:1.5}.copy-btn{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);cursor:pointer;border-radius:4px;align-self:flex-start;padding:8px 16px;font-size:14px;transition:all .2s}.copy-btn:hover{background:var(--accent);color:#fff}.copy-btn.copied{color:#fff;background:#22c55e;border-color:#22c55e}.error-message{color:#ef4444;background:#ef44441a;border-radius:6px;margin-top:16px;padding:12px;font-size:14px}.register-link{text-align:center;margin-top:20px;font-size:15px}.register-link a{color:var(--accent);text-decoration:none}.register-link a:hover{text-decoration:underline}.encoding-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6375' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:36px}.upload-area{border:2px dashed var(--border);text-align:center;cursor:pointer;border-radius:8px;margin-bottom:24px;padding:40px 20px;transition:all .2s}.upload-area:hover,.upload-area.drag-over{border-color:var(--accent);background:var(--accent-bg)}.upload-icon{color:var(--accent);margin-bottom:16px}.upload-text{color:var(--text);font-size:15px}.upload-link{color:var(--accent);font-weight:500}.file-input{display:none}.upload-progress{margin-bottom:24px}.progress-info{justify-content:space-between;margin-bottom:8px;font-size:14px;display:flex}.progress-filename{color:var(--text-h);font-weight:500}.progress-percent{color:var(--accent)}.progress-bar{background:var(--code-bg);border-radius:4px;height:8px;overflow:hidden}.progress-bar-fill{background:var(--accent);border-radius:4px;height:100%;transition:width .2s}.file-list{margin-top:24px}.file-list h2{margin-bottom:16px;font-size:20px}.file-list-items{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.file-list-item{background:var(--code-bg);border-radius:6px;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;display:flex}.file-info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.file-name{color:var(--text-h);white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.file-meta{color:var(--text);font-size:13px}.file-actions{flex-shrink:0;gap:8px;display:flex}.file-action-btn{cursor:pointer;border:1px solid #0000;border-radius:4px;padding:6px 12px;font-size:13px;transition:all .2s}.download-btn{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}.download-btn:hover{background:var(--accent);color:#fff}.delete-btn{color:#ef4444;background:#ef44441a;border-color:#ef44444d}.delete-btn:hover{color:#fff;background:#ef4444}.no-files{text-align:center;color:var(--text);margin-top:24px;font-size:15px}.file-selected{text-align:center;background:var(--code-bg);border-radius:8px;margin-bottom:24px;padding:24px}.file-preview{color:var(--accent);flex-direction:column;align-items:center;gap:8px;margin-bottom:24px;display:flex}.file-preview h3{color:var(--text-h);word-break:break-all;margin:0;font-size:18px}.file-size{color:var(--text);margin:0;font-size:14px}.transfer-actions{justify-content:center;gap:12px;display:flex}.transfer-btn{cursor:pointer;border:1px solid #0000;border-radius:6px;padding:10px 24px;font-size:15px;font-weight:500;transition:all .2s}.create-btn{background:var(--accent);color:#fff}.create-btn:hover{opacity:.9}.cancel-btn{background:var(--code-bg);color:var(--text);border-color:var(--border)}.cancel-btn:hover{background:var(--border)}.accept-btn{color:#fff;background:#22c55e}.accept-btn:hover{background:#16a34a}.reject-btn{color:#ef4444;background:#ef44441a;border-color:#ef44444d}.reject-btn:hover{color:#fff;background:#ef4444}.transfer-status{text-align:center;padding:40px 20px}.spinner{border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;margin:0 auto 16px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.transfer-prompt{text-align:center;background:var(--code-bg);border-radius:8px;padding:24px}.transfer-progress{text-align:center;padding:24px}.transfer-progress p{color:var(--text-h);margin-bottom:12px}.transfer-progress .progress-bar{margin-bottom:8px}.transfer-waiting{text-align:center;padding:24px}.transfer-waiting h3{color:var(--text-h);margin-bottom:12px}.share-link{gap:8px;margin:16px 0;display:flex}.share-link input{border:1px solid var(--border);font-size:14px;font-family:var(--mono);background:var(--code-bg);color:var(--text);border-radius:6px;flex:1;padding:10px 12px}.share-link .copy-btn{background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:6px;padding:10px 16px;font-size:14px}.share-link .copy-btn:hover{opacity:.9}.waiting-text{color:var(--text);margin-top:16px;font-size:14px}.transfer-complete{text-align:center;color:#22c55e;padding:40px 20px}.transfer-complete h3{color:var(--text-h);margin:16px 0 8px}.transfer-complete p{color:var(--text);margin-bottom:24px}.transfer-complete .transfer-btn{background:var(--accent);color:#fff}.transfer-error{text-align:center;padding:40px 20px}.transfer-error .error-message{margin-bottom:24px}.transfer-error .transfer-btn{background:var(--accent);color:#fff}.home-page{background:linear-gradient(135deg,#f5f3ff 0%,#ede9fe 100%);min-height:100vh}.home-header{background:#fff;justify-content:space-between;align-items:center;padding:20px 40px;display:flex;box-shadow:0 1px 3px #0000001a}.home-header h1{color:var(--text-h);margin:0;font-size:24px}.header-right{align-items:center;gap:16px;display:flex}.user-info{color:var(--text);font-size:14px}.logout-btn{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#fff;border-radius:6px;padding:8px 16px;font-size:14px;transition:all .2s}.logout-btn:hover{border-color:var(--accent);background:#f5f5f5}.tools-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;max-width:1200px;margin:0 auto;padding:40px;display:grid}.tool-card{color:var(--text);background:#fff;border:1px solid #0000;border-radius:12px;flex-direction:column;align-items:center;padding:32px 24px;text-decoration:none;transition:all .2s;display:flex;box-shadow:0 2px 8px #00000014}.tool-card:hover{border-color:var(--accent-border);transform:translateY(-4px);box-shadow:0 8px 24px #aa3bff26}.tool-icon{margin-bottom:16px;font-size:48px}.tool-card h3{color:var(--text-h);margin:0 0 8px;font-size:18px}.tool-card p{text-align:center;color:var(--text);margin:0;font-size:14px}.tool-page-layout{flex-direction:column;min-height:100vh;display:flex}.tool-page-content{flex:1;min-height:0}.tool-nav{z-index:40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffe6;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex;position:sticky;top:0;box-shadow:0 1px 2px #0f172a0f}.tool-nav-left,.tool-nav-right{align-items:center;gap:10px;min-width:0;display:flex}.tool-nav-current{color:#1e293b;flex-direction:column;align-items:flex-start;line-height:1.2;display:flex}.tool-nav-label{color:#64748b;font-size:11px}.tool-nav-btn{color:#334155;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:500;transition:all .2s}.tool-nav-btn:hover{color:#4f46e5;border-color:#6366f1}.tool-nav-menu{position:relative}.tool-nav-menu-trigger{justify-content:space-between;gap:8px;min-width:116px}.tool-nav-menu-trigger svg{transition:transform .2s}.tool-nav-menu-trigger.active svg{transform:rotate(180deg)}.tool-nav-menu-list{background:#fff;border:1px solid #dbe4ee;border-radius:12px;min-width:196px;padding:6px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 14px 28px #0f172a26}.tool-nav-menu-item{color:#1e293b;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;width:100%;padding:8px 10px;font-size:13px;display:flex}.tool-nav-menu-item:hover{background:#f8fafc}.tool-nav-menu-item.active{color:#4338ca;background:#eef2ff;font-weight:600}.tool-nav-btn-ghost{background:#f8fafc}.tool-nav-btn-danger{color:#dc2626;background:#fff5f5;border-color:#fecaca}.tool-nav-btn-danger:hover{color:#b91c1c;border-color:#ef4444}.tool-page-content>.login-page,.tool-page-content>.ft-page,.tool-page-content>.mermaid-page{box-sizing:border-box;min-height:calc(100svh - 60px)}.tool-page-content>.login-page{align-items:flex-start;padding:20px}.tool-page-content>.login-page .login-container{background:#fffffff2;border:1px solid #e2e8f0;border-radius:16px;max-width:820px;padding:24px;box-shadow:0 12px 24px #0f172a14}.tool-page-content>.login-page .login-container h1{text-align:left;margin-bottom:20px;font-size:28px}.tool-page-content>.ft-page{align-items:flex-start;padding:20px}.tool-page-content>.ft-page .ft-container{max-width:920px}.tool-page-content>.mermaid-page{padding-top:14px}.auth-page{background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.auth-card{background:#fff;border-radius:20px;width:100%;max-width:400px;padding:40px 32px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.auth-header{text-align:center;margin-bottom:32px}.auth-logo{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:16px;justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto 20px;display:flex}.auth-title{color:#1e293b;letter-spacing:-.5px;margin:0 0 8px;font-size:24px;font-weight:700}.auth-subtitle{color:#64748b;margin:0;font-size:14px}.auth-form{flex-direction:column;gap:20px;display:flex}.auth-field{flex-direction:column;gap:6px;display:flex}.auth-label{color:#374151;font-size:13px;font-weight:500}.auth-input{color:#1e293b;background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;padding:12px 16px;font-family:inherit;font-size:15px;transition:all .2s}.auth-input:focus{background:#fff;border-color:#6366f1;outline:none;box-shadow:0 0 0 3px #6366f11a}.auth-input::placeholder{color:#94a3b8}.auth-btn{cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:14px 24px;font-family:inherit;font-size:15px;font-weight:600;transition:all .2s;display:flex}.auth-btn:disabled{opacity:.7;cursor:not-allowed}.auth-btn-primary{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 4px 6px -1px #6366f14d}.auth-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#4f46e5,#7c3aed);transform:translateY(-1px);box-shadow:0 6px 8px -1px #6366f166}.auth-btn-loading{align-items:center;gap:8px;display:flex}.auth-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.6s linear infinite spin}.auth-error{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:12px 16px;font-size:14px}.auth-success{text-align:center;padding:20px 0}.auth-success-icon{color:#22c55e;margin-bottom:16px}.auth-success h3{color:#1e293b;margin:0 0 8px;font-size:18px}.auth-success p{color:#64748b;margin:0;font-size:14px}.auth-footer{text-align:center;color:#64748b;margin-top:24px;font-size:14px}.auth-link{color:#6366f1;font-weight:500;text-decoration:none}.auth-link:hover{text-decoration:underline}.auth-warning{color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;align-items:center;gap:10px;margin-bottom:24px;padding:12px 16px;font-size:13px;font-weight:500;display:flex}.auth-warning-error{color:#dc2626;background:#fef2f2;border-color:#fecaca}.auth-warning-error svg{color:#ef4444}.auth-form-disabled{opacity:.5;pointer-events:none}@media (width<=640px){.auth-card{padding:32px 24px}.auth-title{font-size:22px}.tool-nav{flex-direction:column;align-items:stretch}.tool-nav-left,.tool-nav-right{flex-wrap:wrap;justify-content:space-between}.tool-nav-menu,.tool-nav-menu-trigger{width:100%}.tool-nav-menu-list{min-width:0;left:0;right:0}.tool-page-content>.login-page,.tool-page-content>.ft-page{padding:14px}.tool-page-content>.login-page .login-container{padding:18px}.tool-page-content>.login-page .login-container h1{font-size:24px}}.ft-page{background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.ft-container{width:100%;max-width:480px}.ft-header{text-align:center;margin-bottom:32px}.ft-title{color:#1e293b;letter-spacing:-.5px;margin:0 0 8px;font-size:28px;font-weight:700}.ft-subtitle{color:#64748b;margin:0;font-size:14px}.ft-tabs{background:#f1f5f9;border-radius:12px;gap:8px;margin-bottom:24px;padding:4px;display:flex}.ft-tab{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.ft-tab.active{color:#1e293b;background:#fff;box-shadow:0 1px 3px #0000001a}.ft-tab-icon{font-size:16px}.ft-card{text-align:center;background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.ft-dropzone{text-align:center;cursor:pointer;background:#fff;border:2px dashed #cbd5e1;border-radius:16px;padding:48px 24px;transition:all .2s}.ft-dropzone:hover,.ft-dropzone.drag-over{background:#f8fafc;border-color:#6366f1}.ft-dropzone-icon{color:#6366f1;margin-bottom:16px}.ft-dropzone-text{color:#475569;margin:0 0 8px;font-size:15px}.ft-link{color:#6366f1;font-weight:500}.ft-dropzone-hint{color:#94a3b8;margin:0;font-size:13px}.ft-file-info{background:#f8fafc;border-radius:12px;align-items:center;gap:12px;margin-bottom:20px;padding:16px;display:flex}.ft-file-info-large{margin-bottom:24px;padding:20px}.ft-file-icon{color:#6366f1;background:#e0e7ff;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.ft-file-details{text-align:left;flex-direction:column;gap:2px;min-width:0;display:flex}.ft-file-name{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;overflow:hidden}.ft-file-size{color:#64748b;font-size:13px}.ft-actions{justify-content:center;gap:12px;display:flex}.ft-transport-picker{text-align:left;margin-bottom:16px}.ft-transport-label{color:#64748b;margin-bottom:8px;font-size:13px;display:block}.ft-transport-options{background:#f1f5f9;border-radius:10px;gap:8px;padding:4px;display:inline-flex}.ft-transport-option{color:#475569;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px 12px;font-size:13px;transition:all .2s}.ft-transport-option.active{color:#1e293b;background:#fff;box-shadow:0 1px 2px #0f172a1a}.ft-btn{cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:12px 24px;font-size:14px;font-weight:500;transition:all .2s;display:inline-flex}.ft-btn:disabled{opacity:.5;cursor:not-allowed}.ft-btn-primary{color:#fff;background:#6366f1}.ft-btn-primary:hover:not(:disabled){background:#4f46e5}.ft-btn-ghost{color:#64748b;background:0 0;border:1px solid #e2e8f0}.ft-btn-ghost:hover{background:#f8fafc}.ft-btn-sm{padding:8px 16px;font-size:13px}.ft-btn-success{color:#fff;background:#22c55e}.ft-btn-success:hover{background:#16a34a}.ft-btn-danger{color:#ef4444;background:#fee2e2}.ft-btn-danger:hover{color:#fff;background:#ef4444}.ft-code-display{margin-bottom:20px}.ft-code-label{color:#64748b;margin-bottom:12px;font-size:13px;display:block}.ft-code-value{justify-content:center;gap:8px;margin-bottom:16px;display:flex}.ft-code-char{color:#1e293b;letter-spacing:1px;background:#f1f5f9;border-radius:8px;justify-content:center;align-items:center;width:40px;height:48px;font-family:SF Mono,Fira Code,monospace;font-size:20px;font-weight:600;display:flex}.ft-divider{color:#94a3b8;align-items:center;gap:12px;margin:20px 0;font-size:13px;display:flex}.ft-divider:before,.ft-divider:after{content:"";background:#e2e8f0;flex:1;height:1px}.ft-share-link{align-items:center;gap:8px;margin-bottom:16px;display:flex}.ft-share-link code{color:#475569;word-break:break-all;text-align:left;background:#f8fafc;border-radius:8px;flex:1;padding:10px 12px;font-size:13px}.ft-waiting-text{color:#64748b;margin:16px 0;font-size:14px}.ft-progress{margin-top:16px}.ft-progress-bar{background:#f1f5f9;border-radius:4px;height:8px;margin-bottom:8px;overflow:hidden}.ft-progress-fill{background:#6366f1;border-radius:4px;height:100%;transition:width .3s}.ft-progress-indeterminate{animation:1.5s ease-in-out infinite indeterminate;width:30%!important}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}.ft-progress-text{color:#6366f1;font-size:14px;font-weight:500}.ft-status-text{color:#1e293b;margin:0 0 16px;font-size:15px;font-weight:500}.ft-prompt-text,.ft-code-input-label{color:#64748b;margin:0 0 16px;font-size:14px}.ft-code-input-group{gap:12px;display:flex}.ft-code-input{text-align:center;letter-spacing:4px;color:#1e293b;background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;flex:1;padding:12px 16px;font-family:SF Mono,Fira Code,monospace;font-size:18px;font-weight:600;transition:all .2s}.ft-code-input:focus{background:#fff;border-color:#6366f1;outline:none}.ft-code-input::placeholder{letter-spacing:2px;color:#cbd5e1}.ft-spinner{border:3px solid #e2e8f0;border-top-color:#6366f1;border-radius:50%;width:32px;height:32px;margin:0 auto 16px;animation:.8s linear infinite spin}.ft-card-success{color:#22c55e}.ft-card-success h3{color:#1e293b;margin:16px 0 24px;font-size:18px}.ft-success-icon{color:#22c55e;margin-bottom:8px}.ft-card-error{color:#ef4444}.ft-error-icon{color:#ef4444;margin-bottom:16px}.ft-error-text{color:#ef4444;margin:0 0 20px;font-size:14px}@media (width<=640px){.ft-page{align-items:flex-start;padding:40px 16px 16px}.ft-container{max-width:100%}.ft-title{font-size:24px}.ft-card{padding:20px}.ft-dropzone{padding:32px 20px}.ft-code-char{width:36px;height:44px;font-size:18px}.ft-code-input-group,.ft-actions{flex-direction:column}.ft-btn{width:100%}.ft-share-link{flex-direction:column}.ft-share-link code{width:100%}}.mermaid-page{background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);min-height:100vh;padding:24px}.mermaid-header{text-align:center;margin-bottom:24px}.mermaid-title{color:#1e293b;letter-spacing:-.5px;margin:0 0 8px;font-size:28px;font-weight:700}.mermaid-subtitle{color:#64748b;margin:0;font-size:14px}.mermaid-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.mermaid-templates{flex-wrap:wrap;gap:8px;display:flex}.mermaid-template-btn{color:#64748b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .2s}.mermaid-template-btn:hover{color:#6366f1;border-color:#6366f1}.mermaid-template-btn.active{color:#fff;background:#6366f1;border-color:#6366f1}.mermaid-actions{gap:8px;display:flex}.mermaid-btn{color:#64748b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .2s;display:inline-flex}.mermaid-btn-sm{padding:6px 12px;font-size:12px}.mermaid-btn:hover:not(:disabled){color:#6366f1;border-color:#6366f1}.mermaid-btn:disabled{opacity:.5;cursor:not-allowed}.mermaid-btn-outline{color:#6366f1;border-color:#6366f1}.mermaid-btn-outline:hover:not(:disabled){background:#e0e7ff}.mermaid-btn-primary{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:#0000;box-shadow:0 2px 4px #6366f14d}.mermaid-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#4f46e5,#7c3aed);transform:translateY(-1px);box-shadow:0 4px 8px #6366f166}.mermaid-btn-warm{color:#fff;background:linear-gradient(135deg,#f59e0b,#f97316);border-color:#0000;box-shadow:0 2px 4px #f59e0b4d}.mermaid-btn-warm:hover:not(:disabled){background:linear-gradient(135deg,#d97706,#ea580c);transform:translateY(-1px);box-shadow:0 4px 8px #f59e0b66}.mermaid-container{grid-template-columns:1fr 1fr;gap:16px;min-height:620px;display:grid}.mermaid-editor-panel,.mermaid-preview-panel{background:#fff;border-radius:16px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.mermaid-panel-header{color:#475569;background:#f8fafc;border-bottom:1px solid #f1f5f9;padding:12px 16px;font-size:13px;font-weight:600}.mermaid-panel-header-preview{justify-content:space-between;align-items:center;gap:12px;display:flex}.mermaid-editor{resize:none;color:#1e293b;tab-size:2;background:#fff;border:none;outline:none;flex:1;padding:16px;font-family:SF Mono,Fira Code,Consolas,monospace;font-size:13px;line-height:1.6}.mermaid-preview{background:#fcfdff;flex:1;justify-content:center;align-items:center;padding:32px;display:flex;overflow:auto}.mermaid-preview>div{text-align:center;width:100%}.mermaid-preview svg{max-width:100%;height:auto}.mermaid-error{color:#ef4444;flex-direction:column;align-items:center;gap:12px;padding:24px;display:flex}.mermaid-error p{text-align:center;max-width:300px;font-size:14px}.mermaid-placeholder{color:#94a3b8;font-size:14px}.mermaid-fullscreen-overlay{z-index:1200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:radial-gradient(circle at top,#1e293be0,#020617f0);flex-direction:column;display:flex;position:fixed;inset:0}.mermaid-fullscreen-toolbar{background:#f8fafcf0;border-bottom:1px solid #94a3b847;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;display:flex}.mermaid-fullscreen-title{color:#1e293b;font-size:14px;font-weight:600}.mermaid-fullscreen-actions{align-items:center;gap:8px;display:flex}.mermaid-zoom-label{text-align:center;color:#475569;background:#e2e8f0;border:1px solid #cbd5e1;border-radius:999px;min-width:62px;padding:6px 10px;font-size:13px;font-weight:600}.mermaid-fullscreen-hint{color:#e2e8f0f2;letter-spacing:.2px;padding:8px 18px 0;font-size:12px}.mermaid-fullscreen-content{cursor:grab;-webkit-user-select:none;user-select:none;flex:1;justify-content:center;align-items:center;padding:24px;display:flex;overflow:hidden}.mermaid-fullscreen-content.panning{cursor:grabbing}.mermaid-fullscreen-canvas{transform-origin:50%;width:max-content;max-width:none;cursor:inherit;will-change:transform;filter:drop-shadow(0 10px 24px #0f172a59);transition:transform .1s ease-out}.mermaid-fullscreen-canvas>div{background:#fff;border:1px solid #e2e8f0;border-radius:12px;width:max-content;padding:10px}.mermaid-fullscreen-canvas svg{max-width:none}@media (width<=768px){.mermaid-page{padding:16px}.mermaid-title{font-size:22px}.mermaid-toolbar{flex-direction:column;align-items:stretch}.mermaid-templates{flex-wrap:nowrap;padding-bottom:8px;overflow-x:auto}.mermaid-template-btn{white-space:nowrap;flex-shrink:0}.mermaid-actions{justify-content:stretch}.mermaid-actions .mermaid-btn{flex:1}.mermaid-container{grid-template-columns:1fr;min-height:auto}.mermaid-editor-panel{min-height:250px}.mermaid-preview-panel{min-height:300px}.mermaid-fullscreen-toolbar{flex-direction:column;align-items:stretch}.mermaid-fullscreen-title{text-align:center}.mermaid-fullscreen-actions{flex-wrap:wrap;justify-content:center}.mermaid-fullscreen-hint{text-align:center}}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}