/* top ribbon, header */
.ribbon { display: block; width: 100%; background: var(--accent); color: var(--on-accent); border: none; padding: 9px 20px; font-weight: 600; font-size: 0.9rem; text-align: center; }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); }
.bar .wrap { display: flex; align-items: center; gap: 8px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.logo .mark { width: 24px; height: 36px; color: var(--fg); flex: none; }
.logo .wm { display: flex; flex-direction: column; gap: 4px; line-height: 1; font-family: var(--font-logo); }
.logo .wm b { font-weight: 500; font-size: 1.15rem; letter-spacing: 0.3em; }
.logo .wm i { font-style: normal; font-size: 0.48rem; letter-spacing: 0.44em; color: var(--muted); }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 2px; }
.seg button { background: transparent; border: none; border-radius: 999px; padding: 0 11px; min-height: 34px; font-weight: 600; font-size: 0.82rem; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.toplinks { display: flex; gap: 2px; }
.toplinks a { text-decoration: none; font-weight: 500; padding: 10px 14px; border-radius: 999px; font-size: 0.95rem; }
.toplinks a:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
@media (max-width: 760px) { .toplinks { display: none; } .logo .wm i { display: none; } }