body{min-height:100vh;margin:0;padding:40px 20px;display:block;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#667eea,#6d7aeb,#7476ec,#7a72e8,#764ba2);background-attachment:fixed;background-size:100% 100%;color:#1a202c}.container{max-width:1200px;width:100%;margin:0 auto;background:#fff;border-radius:16px;padding:48px;box-shadow:0 20px 60px #0000004d}h1{font-size:3rem;font-weight:800;margin:0 0 12px;background:linear-gradient(135deg,#667eea,#6d7aeb,#7476ec,#7a72e8,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:1.25rem;color:#718096;margin:0 0 48px;font-weight:400}h2{font-size:2rem;font-weight:700;margin:48px 0 24px;color:#2d3748;border-bottom:3px solid #667eea;padding-bottom:12px}h2:first-of-type{margin-top:0}h3{font-size:1.25rem;font-weight:600;margin:32px 0 16px;color:#4a5568}.component-section{margin-bottom:48px}.component-demo{background:#f7fafc;border:2px solid #e2e8f0;border-radius:12px;padding:32px;margin-bottom:24px}.demo-group{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:24px}.demo-group:last-child{margin-bottom:0}.code-example{margin-top:16px;overflow-x:auto}.usage-section{background:#edf2f7;border-left:4px solid #667eea;padding:20px 24px;border-radius:8px;margin:24px 0}.usage-section h4{margin:0 0 12px;color:#2d3748;font-size:1.1rem;font-weight:600}.usage-section p{margin:0 0 12px;color:#4a5568;line-height:1.6}.usage-section ul{margin:8px 0;padding-left:24px;color:#4a5568}.usage-section li{margin-bottom:8px}.props-table{width:100%;border-collapse:collapse;margin:16px 0;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.props-table th{background:#667eea;color:#fff;padding:12px 16px;text-align:left;font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px}.props-table td{padding:12px 16px;border-bottom:1px solid #e2e8f0;color:#4a5568}.props-table tr:last-child td{border-bottom:none}.props-table code{background:#edf2f7;padding:2px 6px;border-radius:4px;font-size:.875rem;color:#667eea;font-family:Monaco,Courier New,monospace}@media(max-width:768px){body{padding:20px 16px}.container{padding:24px 20px;border-radius:12px}h1{font-size:2rem}.subtitle{font-size:1rem;margin-bottom:32px}h2{font-size:1.5rem;margin-top:32px}.component-demo{padding:20px}.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}.props-table{min-width:600px}.hide-on-mobile{display:none}}.menu{position:relative;display:inline-block}.menu-button{background-color:#fff}.menu-dropdown{position:absolute;left:0;margin-top:3px;border:1px solid gray;border-radius:6px;background-color:#fff}.menu-item{color:#4b5563;padding:.75rem;cursor:pointer;min-width:160px;display:flex;justify-content:flex-start;align-items:center;-webkit-user-select:none;user-select:none}.menu-item:hover{background-color:#f5f5f5}.menu-item:not(:last-child){border-bottom:1px solid #6b7280}button{background-color:#e5e7eb;color:#4b5563;border:1px solid #6b7280;box-shadow:0 1px 2px #0000000d;cursor:pointer;font-weight:700;padding:9px 17px;border-radius:6px;line-height:24px;display:flex;align-items:center;transition:all .2s ease-in-out}button:hover{background-color:#d1d5db;border-color:#4b5563;box-shadow:0 2px 4px #0000001a;transform:translateY(-1px)}button:active{background-color:#9ca3af;border-color:#374151;box-shadow:0 1px 2px #0000000d;transform:translateY(0)}button:focus{outline:none;box-shadow:0 0 0 3px #6b72804d}button.button-sm{padding:7px 11px;font-size:12px}button.button-lg{padding:13px 25px}button.button-success{color:#047857;background-color:#ecfdf5;border-color:#047857}button.button-success:hover{background-color:#d1fae5;border-color:#065f46;color:#065f46}button.button-success:active{background-color:#a7f3d0;border-color:#064e3b;color:#064e3b}button.button-success:focus{box-shadow:0 0 0 3px #0478574d}button.button-warning{color:#fbbf24;background-color:#fffbeb;border-color:#fbbf24}button.button-warning:hover{background-color:#fef3c7;border-color:#f59e0b;color:#f59e0b}button.button-warning:active{background-color:#fde68a;border-color:#d97706;color:#d97706}button.button-warning:focus{box-shadow:0 0 0 3px #fbbf244d}button.button-danger{color:#f87171;background-color:#fef2f2;border-color:#f87171}button.button-danger:hover{background-color:#fee2e2;border-color:#ef4444;color:#ef4444}button.button-danger:active{background-color:#fecaca;border-color:#dc2626;color:#dc2626}button.button-danger:focus{box-shadow:0 0 0 3px #f871714d}span.badge{color:#1f2937;text-align:center;font-family:Inter;font-size:.875rem;font-style:normal;font-weight:500;line-height:1.25rem;display:inline-flex;padding:.125rem .75rem;justify-content:center;align-items:center;border-radius:.25rem;background:#f3f4f6}span.badge.style-pill{border-radius:.75rem;background:#f3f4f6}span.badge.color-red{color:#991b1b;background:#fee2e2}span.badge.color-yellow{color:#92400e;background:#fef3c7}span.badge.color-green{color:#065f46;background:#d1fae5}span.badge.color-blue{color:#1e40af;background:#dbeafe}span.badge.color-indigo{color:#3730a3;background:#e0e7ff}span.badge.color-purple{color:#5b21b6;background:#ede9fe}span.badge.color-pink{color:#9d174d;background:#fce7f3}.banner{display:flex;align-items:flex-start;gap:.75rem;width:100%;max-width:800px;padding:1rem;border-radius:.5rem;font-family:Inter,sans-serif}.banner-icon{flex-shrink:0;margin-top:.125rem}.banner-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.banner-title{font-size:.875rem;font-weight:500;line-height:1.25rem}.banner-description{font-size:.875rem;font-weight:400;line-height:1.25rem}.banner-text{font-size:.875rem;font-weight:500;line-height:1.25rem}.banner.variant-single-line{align-items:center;padding:.75rem 1rem}.banner.variant-single-line .banner-icon{margin-top:0}.banner.status-success{background-color:#ecfdf5}.banner.status-success .banner-icon{color:#34d399}.banner.status-success .banner-title,.banner.status-success .banner-text{color:#065f46}.banner.status-success .banner-description{color:#047857}.banner.status-warning{background-color:#fffbeb}.banner.status-warning .banner-icon{color:#fbbf24}.banner.status-warning .banner-title,.banner.status-warning .banner-text{color:#92400e}.banner.status-warning .banner-description{color:#b45309}.banner.status-error{background-color:#fef2f2}.banner.status-error .banner-icon{color:#f87171}.banner.status-error .banner-title,.banner.status-error .banner-text{color:#92400e}.banner.status-error .banner-description{color:#b45309}.banner.status-neutral{background-color:#eff6ff}.banner.status-neutral .banner-icon{color:#60a5fa}.banner.status-neutral .banner-title,.banner.status-neutral .banner-text{color:#1e40af}.banner.status-neutral .banner-description{color:#1c51b9}.card-container{position:relative;margin-top:40px;max-width:24rem}.card{position:relative;background:#fff;border-radius:12px;padding:60px 40px 40px;box-shadow:0 2px 8px #0000001a}.icon{position:absolute;top:-30px;left:50%;transform:translate(-50%);width:60px;height:60px;background:#4f7df3;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #4f7df34d}.card-title{margin:0;color:#111827;text-align:center;font-family:Inter;font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem}.card-description{color:#6b7280;text-align:center;font-family:Inter;font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.card-container:hover{transform:translateY(-5px);transition:all .3s ease-in-out;border-radius:.5rem;background:#f9fafb;box-shadow:0 4px 25px #0000001a}*{box-sizing:border-box}.testimonial{position:relative;width:76rem;max-width:1200px;margin:72px auto}.blue-strip{background:#1d4ed8;padding-right:5rem;display:flex;justify-content:end;padding-right:3rem;padding-left:30rem;height:25rem}.testimonial-inner{display:flex;justify-content:flex-end}.text-group{max-width:680px;color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:1.25rem;font-weight:500;line-height:1.6;display:flex;flex-direction:column;justify-content:center}.testimonial-photo{position:absolute;top:62%;left:48px;transform:translateY(-60%);z-index:2;width:24rem;height:29rem}.testimonial-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px}.quote{color:#fff;font-family:Inter;font-size:1.5rem;font-style:normal;font-weight:500;line-height:2rem}.name{color:#fff;font-family:Inter;font-size:1rem;font-style:normal;font-weight:700;line-height:1.5rem}.title{color:#fff;font-family:Inter;font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}@media screen and (max-width:1100px){.testimonial{display:flex;flex-direction:column;width:100%;max-width:23.5rem;margin-top:100px;margin-left:auto;margin-right:auto}.testimonial-photo{top:-98px;left:50%;transform:translate(-50%);width:90%;max-width:21.5rem;height:12.875rem;overflow:hidden;border-radius:.75rem}.testimonial-photo img{width:100%;height:100%;object-position:20% 20%;object-fit:cover}.blue-strip{display:flex;flex-direction:column;padding:60px 2rem 0;height:36.9rem;width:100%;justify-content:center}.text-group{padding:24px 1rem 0 0}}