.converter-demo{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin:var(--spacing-lg) 0}.converter-demo-header{margin-bottom:var(--spacing-md)}.converter-demo-header h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-xs);color:var(--color-text)}.converter-demo-header p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.converter-demo-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin:var(--spacing-md) 0}.converter-demo-panel{display:flex;flex-direction:column}.converter-demo-panel-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--spacing-xs)}.converter-demo-textarea,.converter-demo-preview{width:100%;min-height:250px;padding:var(--spacing-md);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);line-height:1.7;transition:all var(--transition-fast)}.converter-demo-textarea{color:var(--color-text);font-family:var(--font-family-mono);resize:vertical}.converter-demo-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-alpha-10)}.converter-demo-preview{overflow-y:auto;font-family:var(--font-family-base)}.converter-demo-preview pre{background:var(--color-surface);padding:var(--spacing-sm);border-radius:var(--radius-sm);overflow-x:auto;font-size:.8em}.converter-demo-preview code{font-family:var(--font-family-mono);color:var(--color-primary)}.converter-demo-actions{display:flex;justify-content:center;gap:var(--spacing-sm);margin:var(--spacing-md) 0}.converter-demo-button{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast)}.converter-demo-button:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-sm)}.converter-demo-button:focus{outline:2px solid var(--color-primary);outline-offset:2px}.converter-demo-button:disabled{opacity:.5;cursor:not-allowed}.converter-demo-footer{text-align:center;padding-top:var(--spacing-lg);border-top:1px solid var(--color-border);margin-top:var(--spacing-lg)}.converter-demo-footer p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0 0 var(--spacing-md)}.converter-demo-error{padding:var(--spacing-sm) var(--spacing-md);background:#e07a5f1a;border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);font-size:var(--font-size-sm);margin:var(--spacing-sm) 0}@media(max-width:768px){.converter-demo-split{grid-template-columns:1fr}.converter-demo-textarea,.converter-demo-preview{min-height:200px}}