.page{--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-600: #475569;--slate-500: #64748b;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a}.section-header{text-align:center;max-width:800px;margin:0 auto}.section-title{font-size:28px;font-weight:700;color:var(--slate-900);margin:0 0 16px;letter-spacing:-.02em;line-height:1.2}.section-subtitle{font-size:16px;color:var(--slate-600);margin:0;line-height:1.6}.key-features{max-width:1200px;margin:60px auto;padding:24px;background:var(--slate-50);border:1px solid var(--slate-200);border-radius:16px}.key-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.key-feature-card{border:1px solid var(--slate-200);border-radius:12px;background:#fff;padding:24px;transition:all .2s ease}.key-feature-card:hover{border-color:#2563eb;box-shadow:0 4px 12px #2563eb1a;transform:translateY(-2px)}.key-feature-icon{width:36px;height:36px;border:1px solid var(--slate-200);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--slate-600);margin-bottom:12px}.key-feature-card h3{font-size:16px;font-weight:600;color:var(--slate-900);margin:0 0 8px}.key-feature-card p{font-size:14px;color:var(--slate-600);line-height:1.6;margin:0}@media(min-width:961px){.key-features-grid .key-feature-card:nth-child(1){grid-column:span 2}}@media(max-width:960px){.key-features-grid{grid-template-columns:repeat(2,1fr);gap:16px}}@media(max-width:640px){.key-features-grid{grid-template-columns:1fr}}.benefits{max-width:1200px;margin:40px auto;padding:0 24px}.benefits-title{font-size:20px;font-weight:700;color:var(--slate-800);margin-bottom:12px}.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:24px;row-gap:18px}.benefit-card{border:none;background:transparent;padding:0;display:flex;gap:12px;align-items:flex-start}.benefit-card h3{font-size:14px;margin:8px 0 6px}.benefit-card p{font-size:13px;color:var(--slate-500);line-height:1.5}.benefit-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--slate-600)}.usecases{max-width:1200px;margin:40px auto;padding:0 24px}.usecases-title{font-size:20px;font-weight:700;color:var(--slate-800);margin-bottom:12px}.usecases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.usecase-card{border:none;border-radius:12px;background:var(--slate-50);padding:16px;font-size:13px;color:var(--slate-600)}.usecase-icon{width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid var(--slate-200);display:flex;align-items:center;justify-content:center;color:var(--slate-600);margin-bottom:8px}.usecase-card h3{font-size:14px;font-weight:600;color:var(--slate-800);margin:0 0 6px}.cta-band{width:100%;background:var(--slate-50);border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200);margin:30px 0}.ai-companion-demo{max-width:1400px;margin:80px auto;padding:0 24px}.demo-header-section{text-align:center;margin-bottom:40px}.demo-main-title{font-size:32px;font-weight:700;color:var(--slate-900);margin:0 0 12px;letter-spacing:-.02em}.demo-subtitle{font-size:16px;color:var(--slate-600);max-width:700px;margin:0 auto;line-height:1.6}.demo-image-container{width:100%;border-radius:12px;overflow:hidden;box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:1px solid var(--slate-200)}.demo-screenshot{width:100%;height:auto;display:block}.cta-wrap{max-width:1200px;margin:0 auto;padding:24px;text-align:center}.cta-wrap h2{font-size:22px;color:var(--slate-800);margin:0 0 6px}.cta-wrap p{font-size:14px;color:var(--slate-600);margin:0 0 12px}.faq{max-width:1200px;margin:40px auto 80px;padding:0 24px}.faq-title{font-size:20px;font-weight:700;color:var(--slate-800);margin-bottom:12px}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.faq-item{border:1px solid var(--slate-200);border-radius:12px;background:#fff;padding:20px}.faq-item h3{font-size:14px;margin:0 0 6px}.faq-item p{font-size:13px;color:var(--slate-500);line-height:1.5}@media(max-width:960px){.benefits-grid,.usecases-grid,.faq-grid,.demo-content{grid-template-columns:1fr}.chat-panel,.diagram-panel{height:280px}}.page{width:100%}.nav{width:100%;padding:16px 28px;display:flex;justify-content:center;align-items:center;position:sticky;top:0;background:#fff;border-bottom:1px solid var(--slate-100);z-index:30}.nav-content{width:100%;max-width:1200px;display:flex;justify-content:space-between;align-items:center}.nav-left{display:flex;align-items:center;gap:10px}.logo{width:28px;height:28px}.brand{font-weight:700;font-size:18px;color:var(--slate-800);line-height:1}.nav-right{display:flex;gap:16px;align-items:center}.btn-text{background:none;border:none;font-size:14px;cursor:pointer;color:var(--slate-800)}.nav-right a.btn-text{text-decoration:none;color:var(--slate-600);padding:0 12px;border-radius:8px;border:1px solid transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease;display:inline-flex;align-items:center;height:34px}.nav-right a.btn-text:hover{background:var(--slate-100);border-color:var(--slate-200);color:var(--slate-800);text-decoration:none}.nav-right a.btn-text:focus,.nav-right a.btn-text:active{text-decoration:none}.nav-right button.btn-text{color:var(--slate-600);padding:0 12px;border-radius:8px;border:1px solid transparent;height:34px;display:inline-flex;align-items:center}.nav-right button.btn-text:hover{background:var(--slate-100);border-color:var(--slate-200);color:var(--slate-800)}.btn-primary{background:var(--brand-700);color:#fff;border:none;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;height:34px;padding:0 16px}.btn-primary,.btn-primary *{color:#fff!important;fill:#fff;stroke:#fff}.hero{max-width:1300px;margin:auto;padding:80px 24px;display:flex;gap:60px;align-items:center}.hero-content{flex:1}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--slate-100);border:1px solid var(--slate-200);border-radius:999px;font-size:12px;font-weight:600;color:var(--slate-700);margin-bottom:20px}.hero-title{font-size:48px;font-weight:800;line-height:1.1;color:var(--slate-900);margin:0 0 20px}.hero-sub{font-size:17px;color:var(--slate-500);line-height:1.5;max-width:540px;margin-bottom:20px}.btn-large{background:#2563eb;color:#fff;border:none;padding:14px 26px;font-size:15px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}.hero-ctas{display:flex;align-items:center;gap:12px;margin-bottom:12px}.btn-text-secondary{background:transparent;border:1px solid var(--slate-200);color:var(--slate-800);padding:10px 14px;border-radius:8px;font-size:14px;cursor:pointer}.privacy{margin-top:10px;font-size:13px;color:var(--slate-500);display:flex;align-items:center;gap:6px}.hero-gallery{flex:1.2;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.diagram-card{border:1px solid var(--slate-200);border-radius:8px;background:#fff;padding:12px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;box-shadow:0 2px 8px #0f172a0a;will-change:transform}.diagram-card-title{font-size:12px;font-weight:600;color:var(--slate-500)}.diagram-svg{width:100%;height:140px}.diagram-img{width:100%;height:160px;object-fit:cover;border-radius:6px;display:block;transition:transform .35s ease}.diagram-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px #0f172a1f;border-color:var(--slate-300)}.diagram-card:hover .diagram-img{transform:scale(1.1)}.diagram-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;font-size:11px;border:1px solid var(--slate-200);border-radius:999px;color:var(--slate-500)}.d-box{fill:#2563eb0f;stroke:#2563eb;stroke-width:1.5}.d-box.a{stroke:#2563eb;fill:#2563eb0f}.d-box.b{stroke:#10b981;fill:#10b9810f}.d-box.c{stroke:#8b5cf6;fill:#8b5cf614}.d-pill{fill:#0f172a0f;stroke:#0f172a;stroke-width:1.5}.d-diamond{fill:#6366f114;stroke:#6366f1;stroke-width:1.5}.d-edge{stroke:#94a3b8;stroke-width:2;stroke-linecap:round}.features{max-width:1200px;margin:40px auto 80px;padding:0 24px}.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.feature-card{border:1px solid var(--slate-200);border-radius:8px;padding:16px;background:#fff}.feature-card h3{font-size:14px;margin:8px 0 6px;color:var(--slate-800)}.feature-card p{font-size:13px;color:var(--slate-500);line-height:1.5}.feature-icon{width:28px;height:28px;border:1px solid var(--slate-200);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--slate-500)}.footer{max-width:1200px;margin:80px auto 40px;padding:0 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.footer-brand span{font-size:16px;font-weight:700;color:var(--slate-800)}.footer-brand p{font-size:13px;color:var(--slate-500)}.footer-links a{display:block;font-size:14px;color:var(--slate-500);text-decoration:none;margin-bottom:6px}.footer-links a:hover{color:var(--slate-800)}.footer-links button{background:none;border:none;padding:0;display:block;font-size:14px;color:var(--slate-500);text-align:left;cursor:pointer;margin-bottom:6px}.footer-links button:hover{color:var(--slate-800)}.policies{max-width:1200px;margin:0 auto 60px;padding:0 24px}.policies-title{font-size:20px;font-weight:700;color:var(--slate-800);margin-bottom:12px}.policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.policy-card{border:1px solid var(--slate-200);border-radius:12px;background:#fff;padding:16px}.policy-card h3{font-size:14px;margin:0 0 6px;color:var(--slate-800)}.policy-card p{font-size:13px;color:var(--slate-500);line-height:1.6;margin:0}.footer-meta{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--slate-500)}@media(max-width:960px){.hero{flex-direction:column;align-items:flex-start;gap:32px}.hero-gallery{width:100%;grid-template-columns:1fr}.features-grid,.policy-grid{grid-template-columns:1fr}}.companion{max-width:1200px;margin:56px auto 40px;padding:0 24px}.companion-title{font-size:20px;font-weight:700;color:var(--slate-800);margin-bottom:12px}.companion-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:28px;row-gap:16px}.companion-card{border:none;background:transparent;padding:0;display:flex;gap:12px;align-items:flex-start}.companion-card h3{font-size:14px;margin:8px 0 6px}.companion-card p{font-size:13px;color:var(--slate-500);line-height:1.5}.companion-icon{width:28px;height:28px;border:1px solid var(--slate-200);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--slate-500)}@media(max-width:960px){.companion-grid{grid-template-columns:1fr}}.how{max-width:1200px;margin:60px auto 80px;padding:0 24px}.how-title{font-size:20px;font-weight:700;color:var(--slate-800);margin-bottom:12px}.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.how-card{border:1px solid var(--slate-200);background:#fff;border-radius:12px;padding:16px}.how-num{width:24px;height:24px;border-radius:999px;background:var(--slate-900);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-bottom:8px}.json-callout{max-width:1200px;margin:0 auto 60px;padding:0 24px}.callout{border:1px solid var(--slate-200);background:var(--slate-50);border-radius:12px;padding:16px}.callout-head{font-size:14px;font-weight:700;color:var(--slate-800);margin-bottom:10px}.code-block{margin:0;background:#fff;border:1px solid var(--slate-200);border-radius:8px;padding:12px;font-size:12px;line-height:1.5;overflow-x:auto}.pill-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;border:1px solid var(--slate-200);border-radius:999px;color:var(--slate-600);background:#fff}@media(max-width:960px){.how-steps{grid-template-columns:1fr}}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;background:#f5f5f5;overflow:hidden}.auth-page:before{content:"";position:absolute;inset:0;background-image:url(/login-background.png);background-size:100% 111%;background-position:top center;background-repeat:no-repeat;z-index:0}.auth-wrapper{display:flex;flex-direction:column;align-items:center;gap:24px;position:relative;z-index:1}.auth-header{display:flex;align-items:center;gap:12px}.auth-logo{width:40px;height:40px;border-radius:8px}.auth-title{font-size:22px;font-weight:600;color:#1a1a1a}.auth-footer{display:flex;align-items:center;gap:6px;font-size:14px;color:#666}.auth-footer button{background:none;border:none;color:#1a1a1a;font-size:14px;font-weight:500;cursor:pointer;padding:0}.auth-footer button:hover{text-decoration:underline}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);width:100%;max-width:400px;padding:var(--space-6);position:relative;animation:scaleIn .2s ease-out;border:1px solid var(--slate-200)}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.modal-header{margin-bottom:var(--space-4)}.modal-title{font-size:1.25rem;font-weight:600;color:var(--slate-900);margin:0}.modal-description{color:var(--slate-500);font-size:.9rem;margin-top:var(--space-2)}.modal-body{margin-bottom:var(--space-6)}.modal-input{width:100%;padding:var(--space-3);border-radius:var(--radius-md);font-size:.95rem;transition:all .2s;outline:none}.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-3)}.btn-modal{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s;border:none}.btn-secondary{background:var(--slate-100);color:var(--slate-700)}.btn-secondary:hover{background:var(--slate-200)}.btn-primary{background:var(--brand-600);color:red}.btn-primary:hover{background:var(--brand-700);transform:translateY(-1px)}.modal-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}.modal-close-btn{background:transparent;border:none;color:var(--slate-400);cursor:pointer;padding:6px;border-radius:var(--radius-sm);transition:all .2s;display:flex;align-items:center;justify-content:center}.modal-close-btn:hover{color:var(--slate-700);background-color:var(--slate-100)}.modal-input{border:1px solid var(--slate-200);background-color:var(--slate-50);color:var(--slate-900)}.modal-input:focus{background-color:#fff;border-color:var(--brand-500);box-shadow:0 0 0 2px #6366f11a}.modal-input::placeholder{color:var(--slate-400)}.toast-container{position:fixed;bottom:24px;right:24px;z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{background:#fff;border-radius:var(--radius-md);padding:12px 16px;box-shadow:var(--shadow-lg);border:1px solid var(--slate-200);display:flex;align-items:center;gap:12px;min-width:300px;animation:slideInUp .3s cubic-bezier(.16,1,.3,1);pointer-events:auto}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast.success{border-left:4px solid var(--green-500)}.toast.error{border-left:4px solid var(--red-500)}.toast.info{border-left:4px solid var(--brand-500)}.toast-icon{display:flex;align-items:center;justify-content:center}.toast.success .toast-icon{color:var(--green-500)}.toast.error .toast-icon{color:var(--red-500)}.toast.info .toast-icon{color:var(--brand-500)}.toast-content{flex:1}.toast-title{font-weight:600;font-size:.9rem;color:var(--slate-900);margin-bottom:2px}.toast-message{font-size:.85rem;color:var(--slate-600)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--gray-50: #fafafa;--gray-100: #f4f4f5;--gray-200: #e4e4e7;--gray-300: #d4d4d8;--gray-400: #a1a1aa;--gray-500: #71717a;--gray-600: #52525b;--gray-700: #3f3f46;--gray-800: #27272a;--gray-900: #18181b;--gray-950: #09090b;--brand-50: #eff6ff;--brand-100: #dbeafe;--brand-200: #bfdbfe;--brand-300: #93c5fd;--brand-400: #60a5fa;--brand-500: #3b82f6;--brand-600: #2563eb;--brand-700: #1d4ed8;--violet-500: #8b5cf6;--violet-600: #7c3aed;--emerald-500: #10b981;--emerald-600: #059669;--amber-500: #f59e0b;--rose-500: #f43f5e;--success: #22c55e;--warning: #eab308;--error: #ef4444;--info: #0ea5e9;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -1px rgba(0, 0, 0, .04);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 10px 10px -5px rgba(0, 0, 0, .03);--transition-fast: .1s ease;--transition-base: .15s ease;--transition-slow: .2s ease;--z-dropdown: 100;--z-modal: 200;--z-tooltip: 300}html,body,#root{height:100%;width:100%}body{font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--gray-900);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv02","cv03","cv04","cv11"}.app{height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--gray-100)}.app-body{flex:1;display:flex;overflow:hidden}.canvas-wrapper{flex:1;display:flex;overflow:hidden;position:relative;background:var(--gray-50)}.sidebar-container{position:relative;display:flex;transition:width var(--transition-base);width:240px;flex-shrink:0}.sidebar-container.collapsed{width:40px}.sidebar-toggle-btn{width:40px;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;border-right:1px solid var(--gray-200);color:var(--gray-500);transition:all var(--transition-fast)}.sidebar-toggle-btn:hover{background:var(--gray-50);color:var(--gray-700)}.sidebar-collapse-btn{position:absolute;top:12px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-sm);color:var(--gray-400);z-index:10;transition:all var(--transition-fast)}.sidebar-collapse-btn:hover{background:var(--gray-100);color:var(--gray-600)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}:focus{outline:none}:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}::selection{background:var(--brand-200);color:var(--brand-900)}button{font-family:inherit;font-size:inherit;border:none;background:none;cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.5}input,textarea,select{font-family:inherit;font-size:inherit;border:none;background:none;color:inherit}input:focus,textarea:focus,select:focus{outline:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loading{display:flex;align-items:center;justify-content:center;height:100%}.loading-spinner{width:24px;height:24px;border:2px solid var(--gray-200);border-top-color:var(--brand-500);border-radius:var(--radius-full);animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.canvas-wrapper{flex-direction:column}.notes-panel-toggle{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;padding:8px 16px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-full);box-shadow:var(--shadow-md);font-size:12px;font-weight:500;color:var(--gray-600);cursor:pointer;transition:all var(--transition-base);z-index:10}.notes-panel-toggle:hover{background:var(--gray-50);border-color:var(--gray-300);color:var(--gray-800);box-shadow:var(--shadow-lg)}.notes-panel-container{position:absolute;bottom:56px;left:50%;transform:translate(-50%);width:90%;max-width:700px;max-height:250px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;animation:slideUp var(--transition-slow);z-index:10;transition:all var(--transition-slow);display:flex;flex-direction:column}.notes-panel-container.expanded{position:fixed;top:10%;bottom:10%;left:50%;transform:translate(-50%);width:90%;max-width:900px;max-height:none;height:80vh;border-radius:var(--radius-xl);box-shadow:0 25px 50px -12px #00000040;z-index:200;display:flex;flex-direction:column}.notes-panel-container.expanded:before{content:"";position:fixed;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:-1;pointer-events:none}