.topbar {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--bg) 95%, #000 5%);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border-bottom: 1px solid var(--border);
    padding: 0;
    padding-top: calc(env(safe-area-inset-top) + 10px);
    padding-bottom: 10px;
    display: flex; justify-content: center; align-items: center; width: 100%;
}
.topbar .wrap { width: 100%; padding: 0 14px; text-align: center; padding-bottom: 0; }

.brand {
    font-family: 'Orbitron', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: 4px;
    color: var(--accent); position: relative; overflow: hidden; white-space: nowrap;
}
.brand span {
    display: inline-block; color: transparent; -webkit-text-stroke: 1px var(--accent);
    position: relative; text-shadow: 0 0 10px rgba(0, 179, 255, 0.4); animation: none;
}
.brand span::before {
    content: attr(data-text); position: absolute; left: 0; top: 0; color: var(--accent);
    -webkit-text-stroke: 0; width: 100%; white-space: nowrap; overflow: hidden; border-right: none; animation: none;
}
@keyframes neon-pulse {
    0% { text-shadow: 0 0 8px var(--accent), 0 0 15px rgba(0, 179, 255, 0.5); }
    100% { text-shadow: 0 0 20px var(--accent), 0 0 40px rgba(0, 179, 255, 0.8); }
}
@keyframes draw { from { width: 0 } to { width: 100% } }