.comparison-hero{display:flex;align-items:center;justify-content:center;gap:40px;padding:40px;background:linear-gradient(135deg, #1a1a2e 0, #16213e 100%);border-radius:24px;margin-bottom:32px}.comparison-item{text-align:center;flex:1}.comparison-label{color:var(--gray-400);font-size:0.8rem;margin-bottom:16px;letter-spacing:2px}.comparison-char{font-size:8rem;font-weight:700;font-family:'Fira Code',monospace;margin-bottom:16px}.zero-char{color:#10b981;text-shadow:0 0 20px rgba(16,185,129,0.3)}.o-char{color:#f59e0b;text-shadow:0 0 20px rgba(245,158,11,0.3)}.comparison-desc{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:0.8rem;color:var(--gray-500)}.type-badge{padding:2px 10px;border-radius:20px;font-size:0.7rem}.type-badge.zero{background:rgba(16,185,129,0.2);color:#10b981}.type-badge.o{background:rgba(245,158,11,0.2);color:#f59e0b}.vs-divider{text-align:center;color:var(--gray-500)}.vs-divider i{font-size:1.5rem;display:block;margin-bottom:8px}.quick-identify{margin-bottom:32px}.quick-identify h3{font-size:1rem;margin-bottom:16px;color:var(--gray-700);display:flex;align-items:center;gap:8px}.identify-input-group{margin-bottom:20px}.identify-textarea{width:100%;min-height:120px;padding:16px;font-family:'Fira Code',monospace;font-size:1rem;border:1px solid var(--gray-300);border-radius:16px;resize:vertical}.identify-actions{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}.identify-result{background:#1a1a2e;border-radius:16px;min-height:150px;padding:20px;font-family:'Fira Code',monospace;font-size:1.1rem;line-height:1.8;word-break:break-all}.result-placeholder{text-align:center;color:var(--gray-500);padding:40px}.result-placeholder i{font-size:48px;margin-bottom:16px}.highlight-zero{background-color:rgba(16,185,129,0.3);color:#10b981;padding:2px 4px;border-radius:6px;font-weight:bold}.highlight-o{background-color:rgba(245,158,11,0.3);color:#f59e0b;padding:2px 4px;border-radius:6px;font-weight:bold}.stats-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;margin-bottom:32px}.stat-card{background:white;border-radius:20px;padding:20px;display:flex;align-items:center;gap:16px;border:1px solid var(--gray-200)}.stat-icon{width:50px;height:50px;background:linear-gradient(135deg, #e0e7ff, #f0f4ff);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--primary-color)}.stat-value{font-size:1.6rem;font-weight:700;color:var(--gray-800)}.stat-label{font-size:0.75rem;color:var(--gray-500)}.convert-section{margin-bottom:32px}.convert-section h3{font-size:1rem;margin-bottom:16px;color:var(--gray-700);display:flex;align-items:center;gap:8px}.convert-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;background:var(--gray-50);border-radius:20px;padding:24px}.convert-card{display:flex;flex-direction:column;gap:12px}.convert-card label{font-weight:500;font-size:0.85rem}.convert-textarea{width:100%;min-height:150px;padding:12px;font-family:'Fira Code',monospace;border:1px solid var(--gray-300);border-radius:12px;resize:vertical}.convert-actions{display:flex;flex-direction:column;justify-content:center;gap:16px}.convert-btn{background:white;border:1px solid var(--gray-300);padding:10px 16px;border-radius:40px;cursor:pointer;transition:all 0.2s;white-space:nowrap}.convert-btn:hover{background:var(--primary-color);color:white}.copy-convert-btn{margin-top:8px;padding:8px;background:var(--gray-100);border:none;border-radius:8px;cursor:pointer}.visual-tools{margin-bottom:32px}.visual-tools h3{font-size:1rem;margin-bottom:16px;color:var(--gray-700);display:flex;align-items:center;gap:8px}.visual-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:20px}.visual-card{background:var(--gray-50);border-radius:20px;padding:20px}.visual-card h4{font-size:0.9rem;margin-bottom:16px;display:flex;align-items:center;gap:8px}.font-test{display:flex;flex-direction:column;gap:16px}.font-sample{font-size:2rem;letter-spacing:8px}.test-zero{color:#10b981}.test-o{color:#f59e0b}.font-tip{font-size:0.7rem;color:var(--gray-500);margin-top:12px}.color-settings{display:flex;flex-direction:column;gap:16px}.color-picker-item{display:flex;align-items:center;gap:12px}.color-picker-item label{width:80px;font-size:0.8rem}.color-preview{width:30px;height:30px;border-radius:8px;border:1px solid var(--gray-300)}.confusion-table{margin-bottom:32px}.confusion-table h3{font-size:1rem;margin-bottom:16px;color:var(--gray-700);display:flex;align-items:center;gap:8px}.table-wrapper{overflow-x:auto;border-radius:16px;border:1px solid var(--gray-200)}.confusion-chart{width:100%;border-collapse:collapse;font-size:0.85rem}.confusion-chart th{background:var(--gray-50);padding:12px;text-align:center}.confusion-chart td{padding:10px 12px;text-align:center;border-bottom:1px solid var(--gray-200)}.char-cell{font-family:'Fira Code',monospace;font-size:1.2rem;font-weight:bold}.tips-section{margin-top:24px}.tips-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;margin-top:20px}.tip-card{background:var(--gray-50);border-radius:16px;padding:20px;text-align:center}.tip-card i{font-size:28px;color:var(--primary-color);margin-bottom:12px}.tip-card h4{font-size:0.9rem;margin-bottom:8px}.tip-card p{font-size:0.75rem;color:var(--gray-500);line-height:1.5}@media (max-width:900px){.comparison-hero{flex-direction:column;gap:20px}.vs-divider{transform:rotate(90deg)}.stats-grid{grid-template-columns:repeat(2, 1fr)}.convert-grid{grid-template-columns:1fr}.convert-actions{flex-direction:row;order:1}.visual-grid{grid-template-columns:1fr}.tips-grid{grid-template-columns:repeat(2, 1fr)}}@media (max-width:600px){.stats-grid{grid-template-columns:1fr}.tips-grid{grid-template-columns:1fr}.comparison-char{font-size:5rem}}