:root{--brand-navy:#0f172a;--brand-teal:#0f766e;--brand-teal-dark:#0b5c56;--brand-cyan:#22d3ee;--brand-gray:#cbd5e1;--brand-frost:#f8fafc;--brand-blue:#2563eb;--brand-blue-dark:#1d4ed8;--status-success:#15803d;--status-success-dark:#116932;--status-warning:#b45309;--status-danger:#dc2626;--status-danger-dark:#b91c1c;--font-headline:"Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--brand-frost);color:var(--brand-navy);min-height:100vh}nav{background:var(--brand-navy);align-items:center;gap:1.5rem;height:56px;padding:0 2rem;display:flex}nav .brand{color:var(--brand-frost);font-family:var(--font-headline);margin-right:auto;font-size:1.2rem;font-weight:700;text-decoration:none}nav a{color:#ccc;border-radius:4px;padding:.4rem .75rem;font-size:.92rem;text-decoration:none;transition:background .2s}nav a:hover,nav a.active{color:#fff;background:#ffffff1f}.nav-user{align-items:center;gap:.6rem;margin-left:auto;display:flex}.nav-avatar{border:2px solid #fff3;border-radius:50%;width:28px;height:28px}.nav-login{color:#ccc;font-size:.88rem}.btn-nav-logout{color:#ccc;cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:4px;padding:.25rem .65rem;font-size:.82rem;transition:background .2s}.btn-nav-logout:hover{color:#fff;background:#ffffff1a}.page{max-width:900px;margin:2rem auto;padding:0 1rem}h1{font-family:var(--font-headline);color:var(--brand-navy);margin-bottom:1.5rem;font-size:1.6rem}h2{font-family:var(--font-headline);color:var(--brand-navy);margin-bottom:1rem;font-size:1.2rem}.card{background:#fff;border-radius:8px;margin-bottom:1.5rem;padding:1.5rem;box-shadow:0 1px 4px #00000014}label{color:#555;align-items:center;gap:.5rem;margin-bottom:.35rem;font-size:.85rem;font-weight:600;display:flex}input[type=text],input[type=url],textarea,select{background:#fafafa;border:1px solid #ddd;border-radius:5px;width:100%;padding:.55rem .75rem;font-family:inherit;font-size:.95rem;transition:border-color .2s}input:focus,textarea:focus,select:focus{border-color:var(--brand-blue);background:#fff;outline:none}textarea{resize:vertical;min-height:90px}.form-group{margin-bottom:1rem}.char-count{margin-left:auto;font-size:.75rem;font-weight:400}.char-count-warn{color:#b45309}.char-count-ok{color:#15803d}.workflow-hint{border-left:3px solid var(--brand-teal);background:#eef6f5;border-radius:5px;margin-top:.4rem;padding:.5rem .75rem}button{cursor:pointer;border:none;border-radius:5px;padding:.55rem 1.2rem;font-family:inherit;font-size:.9rem;font-weight:600;transition:opacity .2s,background .2s}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--brand-teal);color:#fff}.btn-primary:hover:not(:disabled){background:var(--brand-teal-dark)}.btn-danger{background:var(--status-danger);color:#fff;padding:.3rem .8rem;font-size:.82rem}.btn-danger:hover:not(:disabled){background:var(--status-danger-dark)}.btn-secondary{color:#333;background:#eee}.btn-secondary:hover:not(:disabled){background:#ddd}.btn-export{background:var(--status-success);color:#fff}.btn-export:hover:not(:disabled){background:var(--status-success-dark)}.btn-github{color:#fff;cursor:pointer;background:#24292e;border:none;border-radius:6px;justify-content:center;align-items:center;gap:.6rem;width:100%;padding:.75rem 2rem;font-size:1rem;font-weight:600;transition:background .2s;display:flex}.btn-github:hover{background:#3a4046}.status-badge{text-transform:uppercase;border-radius:12px;padding:.2rem .6rem;font-size:.75rem;font-weight:600;display:inline-block}.status-pending{color:#888;background:#f0f0f0}.status-running{color:#856404;background:#fff3cd}.status-completed{color:#155724;background:#d4edda}.status-failed{color:#721c24;background:#f8d7da}.accordion-item{border:1px solid #e0e0e0;border-radius:6px;margin-bottom:.75rem;overflow:hidden}.accordion-item.accordion-running{border-color:#fbbf24;box-shadow:0 0 0 2px #fbbf2433}.accordion-header{cursor:pointer;-webkit-user-select:none;user-select:none;background:#f9f9f9;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.accordion-header:hover{background:#f0f0f0}.accordion-title{text-transform:capitalize;flex:1;font-size:.95rem;font-weight:600}.accordion-chevron{color:#888;font-size:.75rem;transition:transform .2s}.accordion-chevron.open{transform:rotate(180deg)}.accordion-body{background:#fff;border-top:1px solid #e0e0e0;padding:1rem}.workflow-list-item{background:#fff;border:1px solid #e0e0e0;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:.6rem;padding:.75rem 1rem;display:flex}.persona-item{background:#fff;border:1px solid #e0e0e0;border-radius:6px;margin-bottom:.75rem;padding:1rem 1.25rem}.persona-name{text-transform:capitalize;margin-bottom:.25rem;font-weight:600}.persona-desc{color:#666;margin-bottom:.5rem;font-size:.85rem}.preview-panel{border-top:1px solid #eee;margin-top:1rem;padding-top:1rem}.drag-item{cursor:grab;background:#fff;border:1px solid #ddd;border-radius:5px;align-items:center;gap:.75rem;margin-bottom:.5rem;padding:.6rem .9rem;display:flex}.drag-handle{color:#aaa;cursor:grab;font-size:1.1rem}.drag-item.dragging{opacity:.5}.checkbox-list{flex-direction:column;gap:.4rem;margin-bottom:1rem;display:flex}.checkbox-list label{cursor:pointer;color:#333;align-items:center;gap:.5rem;font-size:.9rem;font-weight:400;display:flex}.checkbox-list input[type=checkbox]{cursor:pointer;width:auto}.history-item{transition:box-shadow .15s,transform .1s}.history-item:hover{transform:translateY(-1px);box-shadow:0 3px 10px #0000001f}.history-item-header{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.25rem;display:flex}.history-title{white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:1rem;font-weight:600;overflow:hidden}.history-meta{color:#888;gap:1rem;margin-top:.2rem;font-size:.8rem;display:flex}.login-page{background:#f5f7fa;justify-content:center;align-items:center;min-height:calc(100vh - 56px);padding:2rem 1rem;display:flex}.login-card{text-align:center;background:#fff;border-radius:12px;flex-direction:column;align-items:center;gap:1.25rem;width:100%;max-width:420px;padding:3rem 2.5rem;display:flex;box-shadow:0 4px 24px #0000001a}.login-logo{margin-bottom:.25rem}.login-title{font-family:var(--font-headline);color:var(--brand-navy);margin:0;font-size:2rem;font-weight:700}.login-subtitle{color:#666;font-size:.95rem;line-height:1.6}.login-note{color:#999;font-size:.78rem;line-height:1.5}.error-msg{color:var(--status-danger);margin-top:.5rem;font-size:.85rem}.spinner{border:2px solid #ccc;border-top-color:var(--brand-blue);vertical-align:middle;border-radius:50%;flex-shrink:0;width:16px;height:16px;margin-right:6px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.tag{color:#3c6bc9;background:#e8f0fe;border-radius:12px;margin-right:4px;padding:.15rem .55rem;font-size:.75rem;display:inline-block}.flex-row{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mb-1{margin-bottom:.5rem}.landing-page{background:#fff;width:100%;margin:0;padding:0}.hero{background:linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-teal) 100%);color:#fff;text-align:center;padding:6rem 2rem 8rem;position:relative;overflow:hidden}.hero:before{content:"";pointer-events:none;background:radial-gradient(circle at 20%,#ffffff26 0%,#0000 50%),radial-gradient(circle at 80% 80%,#ffffff1a 0%,#0000 50%);position:absolute;inset:0}.hero-content{z-index:1;max-width:900px;margin:0 auto;position:relative}.hero-badge{margin-bottom:2rem;animation:3s ease-in-out infinite float;display:inline-block}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.hero-title{font-family:var(--font-headline);letter-spacing:-.5px;margin-bottom:1.5rem;font-size:3.5rem;font-weight:800;line-height:1.2}.gradient-text{background:linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-cyan) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-subtitle{color:#fffffff2;max-width:700px;margin-bottom:2.5rem;margin-left:auto;margin-right:auto;font-size:1.3rem;line-height:1.7}.hero-cta{flex-direction:column;align-items:center;gap:1rem;display:flex}.btn-primary{border-radius:8px;align-items:center;gap:.7rem;padding:1rem 2.5rem;font-size:1.1rem;transition:transform .2s,box-shadow .2s;display:inline-flex}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0f766e59}.btn-large{padding:1.2rem 3rem;font-size:1.2rem}.cta-note{color:#fffc;margin:0;font-size:.9rem}.section-light{background:#fff;padding:5rem 2rem}.section-dark{color:var(--brand-navy);background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);padding:5rem 2rem}.section-content{max-width:1100px;margin:0 auto}.section-title{font-family:var(--font-headline);text-align:center;color:var(--brand-navy);margin-bottom:3rem;font-size:2.5rem;font-weight:700}.section-title-light{font-family:var(--font-headline);text-align:center;color:var(--brand-navy);margin-bottom:1.5rem;font-size:2.5rem;font-weight:700}.section-subtitle-light{text-align:center;color:#4a5568;max-width:700px;margin:0 auto 3rem;font-size:1.15rem;line-height:1.7}.problem-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;display:grid}.problem-card{background:linear-gradient(135deg,#fff 0%,#f8f9fa 100%);border:2px solid #e2e8f0;border-radius:12px;padding:2rem;transition:transform .2s,box-shadow .2s,border-color .2s}.problem-card:hover{border-color:var(--brand-teal);transform:translateY(-4px);box-shadow:0 12px 32px #0f766e26}.problem-icon{margin-bottom:1rem;font-size:3rem}.problem-card h3{color:var(--brand-navy);margin-bottom:.75rem;font-size:1.3rem}.problem-card p{color:#666;font-size:.95rem;line-height:1.6}.personas-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;display:grid}.persona-card{background:#fff;border:2px solid #e2e8f0;border-radius:10px;padding:1.75rem;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}.persona-card:before{content:"";background:linear-gradient(90deg, var(--brand-teal), var(--brand-cyan));height:3px;transition:transform .3s;position:absolute;top:0;left:0;right:0;transform:scaleX(0)}.persona-card:hover:before{transform:scaleX(1)}.persona-card:hover{border-color:var(--brand-teal);transform:translateY(-4px);box-shadow:0 12px 32px #0f766e26}.persona-number{background:linear-gradient(135deg, var(--brand-teal), var(--brand-navy));color:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;margin-bottom:1rem;font-size:.9rem;font-weight:700;display:inline-flex}.persona-card h3{color:var(--brand-navy);margin-bottom:.5rem;font-size:1.15rem}.persona-card p{color:#4a5568;font-size:.9rem;line-height:1.5}.benefits-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;display:grid}.benefit-card{background:linear-gradient(135deg,#fff 0%,#fafbfc 100%);border:1px solid #e2e8f0;border-radius:12px;padding:2rem;transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:0 2px 12px #0f766e14}.benefit-card:hover{border-color:var(--brand-teal);transform:translateY(-4px);box-shadow:0 16px 40px #0f766e26}.benefit-icon{margin-bottom:1rem;font-size:2.5rem}.benefit-card h3{color:var(--brand-navy);margin-bottom:.75rem;font-size:1.25rem}.benefit-card p{color:#666;font-size:.95rem;line-height:1.6}.use-cases{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;display:grid}.use-case{background:#fff;border:2px solid #e2e8f0;border-radius:10px;padding:2rem;transition:transform .2s,box-shadow .2s,border-color .2s}.use-case:hover{border-color:var(--brand-teal);transform:translateY(-4px);box-shadow:0 12px 32px #0f766e26}.use-case h3{color:var(--brand-navy);margin-bottom:.75rem;font-size:1.2rem}.use-case p{color:#4a5568;font-size:.9rem;line-height:1.6}.steps{flex-direction:column;gap:2rem;max-width:800px;margin:0 auto;display:flex}.step{align-items:flex-start;gap:2rem;display:flex}.step-number{background:linear-gradient(135deg, var(--brand-teal), var(--brand-navy));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;font-size:1.5rem;font-weight:700;display:flex;box-shadow:0 4px 16px #0f766e4d}.step-content h3{color:var(--brand-navy);margin-bottom:.5rem;font-size:1.3rem}.step-content p{color:#666;font-size:.95rem;line-height:1.6}.section-cta{background:linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-teal) 100%);color:#fff;text-align:center;padding:5rem 2rem}.cta-title{font-family:var(--font-headline);margin-bottom:1rem;font-size:2.5rem;font-weight:700}.cta-subtitle{color:#ffffffe6;margin-bottom:2.5rem;font-size:1.15rem;line-height:1.7}.landing-footer{color:#718096;text-align:center;background:#f7fafc;border-top:1px solid #e2e8f0;padding:2rem;font-size:.85rem}@media (width<=768px){.hero{padding:4rem 1.5rem 5rem}.hero-title{font-size:2.2rem}.hero-subtitle{font-size:1.05rem}.section-title,.section-title-light,.cta-title{font-size:1.8rem}.section-light,.section-dark,.section-cta{padding:3rem 1.5rem}.problem-grid,.benefits-grid,.personas-grid,.use-cases{grid-template-columns:1fr}.step{flex-direction:column;gap:1rem}.step-number{width:48px;height:48px;font-size:1.2rem}.btn-primary{padding:.9rem 2rem;font-size:1rem}.btn-large{padding:1rem 2.5rem;font-size:1.1rem}}