/* One navigation surface. Help is secondary, never a competing primary pill. */
.topbar,body[data-panel=closed] .topbar{
  top:24px;left:32px;width:auto;gap:24px;padding:0;flex-wrap:nowrap;align-items:center;
}
body[data-panel=closed] .topbar{right:32px}
body[data-panel=open] .topbar{right:calc(var(--sheet) + 32px)}
.topbar .brand{padding:0;min-height:48px;flex:0 0 auto}
.topbar .brand img{width:128px;height:auto}
.header-controls{
  display:flex;align-items:center;flex:0 1 auto;min-width:0;margin-left:auto;padding:5px;
  border:1px solid #ffffff30;border-radius:22px;
  background:linear-gradient(145deg,#ffffff17,#ffffff03 55%),#1d241d70;
  box-shadow:inset 0 1px 0 #ffffff38,0 4px 20px #0a100c16;
  backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);
}
.topbar .rail-nav{
  display:flex;flex:1 1 auto;min-width:0;gap:4px;margin:0;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.topbar .rail-nav button{
  flex:1 1 auto;min-width:0;min-height:44px;padding:10px 19px;border:0;border-radius:16px;
  font:500 12px/1.3 var(--ui-font);letter-spacing:0;white-space:nowrap;color:#f9f8f0e6;
  text-shadow:0 1px 4px #0003;box-shadow:none;background:transparent;
  transition:background-color 140ms ease-out,color 140ms ease-out,transform 140ms ease-out;
}
.topbar .rail-nav button[aria-selected=true],
body[data-panel=closed] .topbar .rail-nav button[aria-selected=true]{
  color:#fffef8;font-weight:500;background:linear-gradient(140deg,#ffffff29,#ffffff12);
  box-shadow:inset 0 1px 0 #ffffff45,0 1px 3px #0a120c12;
}
.topbar .rail-nav button:focus-visible{outline:2px solid #fff;outline-offset:-3px;transition:none}
.topbar .count{font-size:9px;opacity:.58;margin-left:5px}
.header-controls .guide-launch{
  position:relative;inset:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;flex:0 0 auto;padding:10px 16px;margin:0 0 0 9px;
  border:0;border-radius:16px;background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:#f9f8f0ba;font:400 11px/1.3 var(--ui-font);white-space:nowrap;
  transition:background-color 140ms ease-out,color 140ms ease-out;
}
.header-controls .guide-launch::before{content:"";position:absolute;left:-5px;top:12px;bottom:12px;width:1px;background:#ffffff26}
.header-controls .guide-question{width:16px;height:16px;font-size:10px;opacity:.85}
body[data-panel=open] .header-controls .guide-launch{display:none}
.guide-mobile{display:none}
@media(hover:hover) and (pointer:fine){
  .topbar .rail-nav button:hover:not([aria-selected=true]),.header-controls .guide-launch:hover{color:#fff;background:#ffffff12;box-shadow:none}
}
@media(min-width:821px) and (max-width:1100px){
  body[data-panel=open] .topbar{gap:12px;left:24px;right:calc(var(--sheet) + 24px)}
  body[data-panel=open] .topbar .brand img{width:76px}
  body[data-panel=open] .header-controls{padding:4px;border-radius:19px}
  body[data-panel=open] .topbar .rail-nav{gap:0}
  body[data-panel=open] .topbar .rail-nav button{padding-inline:5px;font-size:10px;border-radius:14px}
  body[data-panel=closed] .topbar .brand img{width:112px}
  body[data-panel=closed] .topbar .rail-nav button{padding-inline:13px}
}
@media(max-width:820px){
  .topbar,body[data-panel=closed] .topbar,body[data-panel=open] .topbar{top:calc(12px + env(safe-area-inset-top));left:16px;right:16px;gap:10px}
  .topbar .brand{min-height:44px}
  .topbar .brand img{width:64px}
  .header-controls{flex:1 1 auto;padding:4px;border-radius:19px}
  .topbar .rail-nav{gap:0}
  .topbar .rail-nav button{font-size:10px;padding-inline:3px;min-height:44px;border-radius:14px}
  .header-controls .guide-launch{display:none}
  .topbar .count{display:none}
  body[data-panel=closed] .hero-foot{right:16px}
  .guide-mobile{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:auto;padding:10px 12px;color:#fffef0;font:500 11px var(--ui-font);border-radius:22px;background:#26302470;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid #fff3}
  body[data-panel=open] .guide-mobile{display:none}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .header-controls,.guide-mobile{background:#303c2c;backdrop-filter:none;-webkit-backdrop-filter:none}
  .header-controls .guide-launch{color:#fffef0}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header-controls,.guide-mobile{background:#303c2c}
}
@media(prefers-reduced-motion:reduce){.header-controls button{transition:none!important}}