body { font-family: ui-sans-serif, system-ui, sans-serif; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.5s ease-out forwards; }
.tab-button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s ease; white-space: nowrap; }
.tab-button.active { color: #2563eb; border-bottom-color: #2563eb; }
.tab-panel { display: none; animation: fadeIn 0.3s; }
.tab-panel.active { display: block; }
.info-card code { display: block; white-space: pre-wrap; word-break: break-all; background-color: #f3f4f6; padding: 4px 6px; border-radius: 4px; font-size: 0.9em; margin-bottom: 4px; }
.info-card code:last-child { margin-bottom: 0; }
.health-item { display: flex; align-items: center; gap: 0.75rem; }
.health-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.info-card { background-color: #f9fafb; border-left: 4px solid #3b82f6; padding: 1rem; margin-top: 1rem; border-radius: 0.25rem; }
.info-card p { margin: 0; }
.tabs-container { overflow-x: auto; scrollbar-width: none; }
.tabs-container::-webkit-scrollbar { display: none; }
.tabs-nav { display: flex; flex-wrap: nowrap; }
.banner img { max-width: 100%; height: auto; }
.logo-img { height: 6rem; width: auto; max-width: 300px; object-fit: contain; }
@media (min-width: 640px) { .logo-img { height: 8rem; max-width: 400px; } }
.logo-link { margin-bottom: 1rem; }
.logo-link:hover .logo-img { opacity: 0.8; }