/* topbar.css */
.topbar{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--nav-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 clamp(20px,5vw,64px);pointer-events:none}
.topbar>*{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.01em;font-size:15px;color:var(--text-primary)}
.brand-mark{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--text-primary);
  color:var(--bg);font-weight:800;font-size:15px;letter-spacing:-.02em;transition:transform var(--t-base) var(--ease-spring),background var(--t-base) var(--ease-out)}
@media (max-width:560px){.brand-name{display:none}}
@media (hover:hover) and (pointer:fine){.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.05)}}
.topbar-controls{display:inline-flex;align-items:center;gap:10px}
.ctrl-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--bg-elevated);
  border:1px solid var(--border);color:var(--text-primary);
  transition:transform var(--t-fast) var(--ease-out),background var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ctrl-btn:hover{border-color:var(--border-hover);transform:translateY(-1px)}}
.ctrl-btn:active{transform:scale(.95)}
.theme-btn svg{width:20px;height:20px;display:block}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .theme-btn .sun{display:block}:root:not([data-theme]) .theme-btn .moon{display:none}}
.menu-btn{position:relative}
.menu-btn .bar{position:absolute;left:50%;top:50%;width:17px;height:2px;border-radius:2px;background:var(--text-primary);
  transition:transform 360ms var(--ease-spring),background var(--t-base) var(--ease-out)}
.menu-btn .bar.v{transform:translate(-50%,-50%) rotate(90deg)}
.menu-btn .bar.h{transform:translate(-50%,-50%) rotate(0)}
body.menu-open .menu-btn .bar.v{transform:translate(-50%,-50%) rotate(45deg)}
body.menu-open .menu-btn .bar.h{transform:translate(-50%,-50%) rotate(-45deg)}