.card.svelte-101tphp{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.card.svelte-101tphp .card-header:where(.svelte-101tphp) h1:where(.svelte-101tphp){color:var(--text-primary);font-size:var(--font-size-2xl);font-weight:700;margin:0}.card.svelte-101tphp .card-header:where(.svelte-101tphp) p:where(.svelte-101tphp){color:var(--text-secondary);margin:var(--spacing-xs) 0 0}.examples-section.svelte-101tphp{margin-bottom:var(--spacing-lg);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-primary)}.examples-section.svelte-101tphp summary:where(.svelte-101tphp){display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;color:var(--text-primary);font-weight:600;transition:var(--transition-fast)}.examples-section.svelte-101tphp summary:where(.svelte-101tphp):hover{background:var(--surface-hover)}.examples-section.svelte-101tphp summary:where(.svelte-101tphp) .chevron:where(.svelte-101tphp){width:16px;height:16px;transition:transform var(--transition-fast)}.examples-section[open].svelte-101tphp summary:where(.svelte-101tphp) .chevron:where(.svelte-101tphp){transform:rotate(180deg)}.examples-section.svelte-101tphp .examples-grid:where(.svelte-101tphp){display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-sm);padding:var(--spacing-md);border-radius:0 0 var(--radius-md) var(--radius-md)}.examples-section.svelte-101tphp .example-btn:where(.svelte-101tphp){text-align:left;padding:var(--spacing-sm);border:none;border:1px solid var(--border-primary);border-radius:var(--radius-sm);transition:var(--transition-fast);cursor:pointer}.examples-section.svelte-101tphp .example-btn:where(.svelte-101tphp):hover{border-color:var(--color-primary)}.examples-section.svelte-101tphp .example-btn:where(.svelte-101tphp) .example-name:where(.svelte-101tphp){font-weight:600;margin-bottom:var(--spacing-xs)}.examples-section.svelte-101tphp .example-btn:where(.svelte-101tphp) .example-desc:where(.svelte-101tphp){font-size:var(--font-size-xs);opacity:.9}.form-grid.svelte-101tphp{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl)}@media (max-width: 768px){.form-grid.svelte-101tphp{grid-template-columns:1fr;gap:var(--spacing-lg)}}.input-section.svelte-101tphp{display:flex;flex-direction:column;gap:var(--spacing-md)}.input-section.svelte-101tphp .field-group:where(.svelte-101tphp) label:where(.svelte-101tphp){display:block;color:var(--text-primary);font-weight:500;margin-bottom:var(--spacing-xs);cursor:help}.input-section.svelte-101tphp .field-group:where(.svelte-101tphp) input:where(.svelte-101tphp){width:100%;padding:var(--spacing-sm);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);transition:var(--transition-fast)}.input-section.svelte-101tphp .field-group:where(.svelte-101tphp) input:where(.svelte-101tphp):focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-dark)}.input-section.svelte-101tphp .field-group:where(.svelte-101tphp) .mono-input:where(.svelte-101tphp){font-family:var(--font-mono);font-size:var(--font-size-sm)}.input-section.svelte-101tphp .field-group:where(.svelte-101tphp) small:where(.svelte-101tphp){color:var(--text-secondary);font-size:var(--font-size-xs);margin-top:var(--spacing-xs);display:block}.input-section.svelte-101tphp .field-group:where(.svelte-101tphp) .email-preview:where(.svelte-101tphp){display:flex;align-items:center;gap:var(--spacing-xs);color:var(--color-info);font-size:var(--font-size-xs);margin-top:var(--spacing-xs)}.converter-section.svelte-101tphp{padding:var(--spacing-sm);background:color-mix(in srgb,var(--color-success) 8%,transparent);border:1px solid var(--color-success);border-radius:var(--radius-md)}.converter-section.svelte-101tphp h4:where(.svelte-101tphp){color:var(--color-success);font-weight:600;margin:0 0 var(--spacing-sm)}.converter-section.svelte-101tphp .converter-input:where(.svelte-101tphp){display:flex;gap:var(--spacing-sm)}.converter-section.svelte-101tphp .converter-input:where(.svelte-101tphp) input:where(.svelte-101tphp){flex:1;padding:var(--spacing-xs);border:1px solid var(--color-success);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary)}.converter-section.svelte-101tphp .converter-input:where(.svelte-101tphp) input:where(.svelte-101tphp):focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--color-success),transparent 80%)}.converter-section.svelte-101tphp small:where(.svelte-101tphp){color:var(--color-success);font-size:var(--font-size-xs);margin-top:var(--spacing-xs);display:block}.output-section.svelte-101tphp{display:flex;flex-direction:column;gap:var(--spacing-md)}.output-section.svelte-101tphp .output-group:where(.svelte-101tphp) .code-output:where(.svelte-101tphp){padding:var(--spacing-md);background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md)}.output-section.svelte-101tphp .output-group:where(.svelte-101tphp) .code-output:where(.svelte-101tphp) pre:where(.svelte-101tphp){font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-primary);white-space:pre-wrap;word-break:break-all;margin:0}.output-section.svelte-101tphp .output-group:where(.svelte-101tphp) .code-output:where(.svelte-101tphp) .placeholder-text:where(.svelte-101tphp){color:var(--text-secondary);font-size:var(--font-size-sm);margin:0}.output-section.svelte-101tphp .output-group:where(.svelte-101tphp) .code-output:where(.svelte-101tphp) small:where(.svelte-101tphp){color:var(--text-secondary);font-size:var(--font-size-xs);margin-top:var(--spacing-sm);display:block}.output-section.svelte-101tphp .output-group:where(.svelte-101tphp) .txt-output:where(.svelte-101tphp){background:color-mix(in srgb,var(--color-info) 8%,transparent);border-color:var(--color-info)}.output-section.svelte-101tphp .output-group:where(.svelte-101tphp) .txt-output:where(.svelte-101tphp) pre:where(.svelte-101tphp){color:var(--color-info)}.output-section.svelte-101tphp .output-group:where(.svelte-101tphp) .txt-output:where(.svelte-101tphp) small:where(.svelte-101tphp){color:var(--color-info)}.alert.svelte-101tphp{padding:var(--spacing-sm);border-radius:var(--radius-md);margin-bottom:var(--spacing-md)}.alert.svelte-101tphp h4:where(.svelte-101tphp){font-weight:600;margin:0 0 var(--spacing-xs)}.alert.svelte-101tphp ul:where(.svelte-101tphp){margin:0;padding-left:var(--spacing-md)}.alert.svelte-101tphp ul:where(.svelte-101tphp) li:where(.svelte-101tphp){margin-bottom:var(--spacing-xs)}.alert.alert-info.svelte-101tphp{background:color-mix(in srgb,var(--color-info) 8%,transparent);border:1px solid var(--color-info);color:var(--color-info)}.alert.alert-warning.svelte-101tphp{background:color-mix(in srgb,var(--color-warning) 8%,transparent);border:1px solid var(--color-warning);color:var(--color-warning)}.button-group.svelte-101tphp{display:flex;gap:var(--spacing-sm)}@media (max-width: 480px){.button-group.svelte-101tphp{flex-direction:column}}.btn-secondary.svelte-101tphp{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast)}.btn-secondary.svelte-101tphp:hover{background:var(--surface-hover)}.btn-secondary.svelte-101tphp:focus{outline:none;box-shadow:0 0 0 2px var(--color-primary-dark)}.btn-secondary.success.svelte-101tphp{border-color:var(--color-success);color:var(--color-success)}.btn-primary.svelte-101tphp{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-primary);color:var(--bg-primary);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast)}.btn-primary.svelte-101tphp:hover{background:var(--color-primary);color:var(--bg-primary)}.btn-primary.svelte-101tphp:focus{outline:none;box-shadow:0 0 0 2px var(--color-primary-dark)}.btn-primary.success.svelte-101tphp{background:color-mix(in srgb,var(--color-success) 8%,transparent)}.btn-primary.success.svelte-101tphp:hover{background:var(--color-success-light)}.btn-success.svelte-101tphp{padding:var(--spacing-xs) var(--spacing-sm);background:color-mix(in srgb,var(--color-success) 8%,transparent);color:var(--text-primary);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast)}.btn-success.svelte-101tphp:hover:not(:disabled){background:var(--color-success-light)}.btn-success.svelte-101tphp:disabled{opacity:.5;cursor:not-allowed}.info-section.svelte-101tphp{margin-top:var(--spacing-xl)}.info-section.svelte-101tphp .info-card:where(.svelte-101tphp){background:var(--bg-secondary);border:1px solid var(--border-primary);margin-bottom:var(--spacing-lg);flex-direction:column;align-items:baseline}.info-section.svelte-101tphp .info-card:where(.svelte-101tphp) h4:where(.svelte-101tphp){color:var(--text-primary);font-weight:600;margin:0 0 var(--spacing-sm)}.info-section.svelte-101tphp .info-card:where(.svelte-101tphp) p:where(.svelte-101tphp){color:var(--text-primary);line-height:1.6;margin:0}.info-section.svelte-101tphp .info-grid:where(.svelte-101tphp){display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.info-section.svelte-101tphp .info-grid:where(.svelte-101tphp) .card:where(.svelte-101tphp){background:var(--bg-secondary);border:1px solid var(--border-primary)}.info-section.svelte-101tphp .info-grid:where(.svelte-101tphp) .card:where(.svelte-101tphp) h4:where(.svelte-101tphp){color:var(--text-primary);font-weight:600;margin:0 0 var(--spacing-sm)}.info-section.svelte-101tphp .info-grid:where(.svelte-101tphp) .card:where(.svelte-101tphp) .encoding-examples:where(.svelte-101tphp) p:where(.svelte-101tphp){color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.info-section.svelte-101tphp .info-grid:where(.svelte-101tphp) .card:where(.svelte-101tphp) .encoding-examples:where(.svelte-101tphp) .code-example:where(.svelte-101tphp){padding:var(--spacing-xs);background:var(--bg-primary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--font-size-xs);margin-bottom:var(--spacing-xs)}.info-section.svelte-101tphp .info-grid:where(.svelte-101tphp) .card:where(.svelte-101tphp) .encoding-examples:where(.svelte-101tphp) .code-example:where(.svelte-101tphp) div:where(.svelte-101tphp){color:var(--text-primary)}.info-section.svelte-101tphp .info-grid:where(.svelte-101tphp) .card:where(.svelte-101tphp) .encoding-examples:where(.svelte-101tphp) small:where(.svelte-101tphp){color:var(--text-secondary);font-size:var(--font-size-xs)}.info-section.svelte-101tphp .info-grid:where(.svelte-101tphp) .card:where(.svelte-101tphp) .use-cases:where(.svelte-101tphp){margin:0;padding-left:var(--spacing-md)}.info-section.svelte-101tphp .info-grid:where(.svelte-101tphp) .card:where(.svelte-101tphp) .use-cases:where(.svelte-101tphp) li:where(.svelte-101tphp){color:var(--text-secondary);margin-bottom:var(--spacing-xs);position:relative}.info-section.svelte-101tphp .info-grid:where(.svelte-101tphp) .card:where(.svelte-101tphp) .use-cases:where(.svelte-101tphp) li:where(.svelte-101tphp)::marker{color:var(--color-primary)}.info-section.svelte-101tphp .best-practices-card:where(.svelte-101tphp){background:var(--bg-secondary);border:1px solid var(--border-primary)}.info-section.svelte-101tphp .best-practices-card:where(.svelte-101tphp) h4:where(.svelte-101tphp){color:var(--text-primary);font-weight:600;margin:0 0 var(--spacing-sm)}.info-section.svelte-101tphp .best-practices-card:where(.svelte-101tphp) .best-practices:where(.svelte-101tphp){margin:0;padding-left:var(--spacing-md)}.info-section.svelte-101tphp .best-practices-card:where(.svelte-101tphp) .best-practices:where(.svelte-101tphp) li:where(.svelte-101tphp){color:var(--text-primary);margin-bottom:var(--spacing-xs)}.info-section.svelte-101tphp .best-practices-card:where(.svelte-101tphp) .best-practices:where(.svelte-101tphp) li:where(.svelte-101tphp)::marker{color:var(--color-primary)}