@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        body { font-family: 'Inter', system-ui, sans-serif; }
        .tail-container { max-width: 1280px; margin: 0 auto; }
        .strength-bar { height: 12px; border-radius: 9999px; overflow: hidden; background: #e5e7eb; }
        .strength-fill { background: linear-gradient(to right, #ef4444, #f59e0b, #eab308, #84cc16, #22c55e); transition: width 0.5s ease-in-out; }
        .char-type { transition: all 0.2s; }
        .char-type.active { background-color: #f0f9ff; border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; }
        .card { transition: transform 0.2s, box-shadow 0.2s; }
        .card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
        .faq-item { border-bottom: 1px solid #e5e7eb; }
        .faq-item:last-child { border-bottom: none; }
        .faq-summary { cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
        .faq-summary:hover { color: #3b82f6; }
        .faq-details { display: none; color: #4b5563; }
        .faq-item.open .faq-details { display: block; }
        .faq-item.open .faq-icon { transform: rotate(180deg); }
        .future-card { transition: all 0.2s; }
        .future-card:hover { border-color: #a78bfa; background-color: #faf5ff; }