/* A single quiet glass surface, reserved for navigation over the artwork. */
.topbar{position:absolute;top:24px;left:32px;right:calc(var(--sheet) + 32px);display:flex;align-items:center;padding:7px 10px 7px 22px;gap:20px;border:1px solid #fff4;border-radius:100px;color:#fffef5;background:linear-gradient(115deg,#fff2,#fff0),#26302472;backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);box-shadow:inset 0 1px 0 #ffffff50,0 5px 24px #101a1715;z-index:2}.brand{display:flex;align-items:center;min-height:44px;padding:0;flex-shrink:0}.brand img{width:112px;height:auto;filter:brightness(0) invert(1)}.topbar nav{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,1fr);gap:0;min-width:0;flex:1}.topbar nav button{z-index:1;position:relative;min-height:44px;padding:10px 7px;border-radius:99px;white-space:nowrap;font-size:11px;text-shadow:0 1px 6px #0004}.topbar nav button[aria-selected=true]{background:#ffffff18;box-shadow:inset 0 0 0 1px #ffffff30}.count{font-size:9px;margin-left:3px;opacity:.7;font-variant-numeric:tabular-nums}.glass-lens{position:absolute;left:0;top:0;width:25%;height:100%;border-radius:99px;pointer-events:none;opacity:0;border:1px solid #fff4;background:linear-gradient(135deg,#fff2,#fff0);box-shadow:inset 0 1px 0 #fff4;transition:transform 200ms cubic-bezier(.23,1,.32,1),opacity 120ms ease-out}.topbar nav[data-lens=visible] .glass-lens{opacity:1}.topbar nav[data-input=keyboard] .glass-lens{transition:none}.topbar button:focus-visible{outline-color:#fff;outline-offset:3px}body[data-panel=closed] .topbar{right:auto;width:min(740px,calc(100% - 64px))}body[data-panel=closed] .topbar nav button[aria-selected=true]{background:transparent;box-shadow:none}
@media(max-width:1250px) and (min-width:821px){.topbar{left:24px;right:calc(var(--sheet) + 24px);gap:12px;padding-inline:16px}.brand img{width:90px}.topbar nav button{font-size:10px;padding-inline:4px}.topbar .count{display:none}}
@media(max-width:990px) and (min-width:821px){.topbar{flex-wrap:wrap;border-radius:24px;gap:4px;padding:10px 14px}.topbar nav{flex-basis:100%}.brand img{width:100px}.topbar .brand{min-height:34px;padding-left:8px}}
@media(max-width:820px){.topbar,body[data-panel=closed] .topbar{top:calc(12px + env(safe-area-inset-top));left:16px;right:16px;width:auto;border-radius:24px;flex-wrap:wrap;padding:4px 12px 7px;gap:2px}.brand{min-height:44px;padding-left:7px}.brand img{width:105px}.topbar nav{flex-basis:100%;min-width:0}.topbar nav button{font-size:11px;padding-inline:4px}.count{font-size:9px}body[data-panel=closed] .hero-foot{left:24px;right:24px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.topbar,.hero-foot>#sound{background:#354133}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.topbar,.hero-foot>#sound{background:#354133;backdrop-filter:none;-webkit-backdrop-filter:none}}
.topbar nav button{font-size:13px}.brand img{width:132px}
@media(max-width:1250px) and (min-width:821px){.topbar nav button{font-size:11px}.brand img{width:96px}}
@media(max-width:820px){.topbar nav button{font-size:11px}.brand img{width:105px}}
/* One selected capsule; separated hit areas never share or duplicate borders. */
.topbar nav{gap:8px}.topbar nav button{transition:background-color 140ms ease-out;color:#fffef5}.topbar nav button[aria-selected=true]{background:linear-gradient(135deg,#ffffff26,#ffffff10);box-shadow:inset 0 0 0 1px #ffffff40}.topbar nav button[data-hover]:not([aria-selected=true]){background:#ffffff0d;box-shadow:none}.topbar nav button:focus-visible{outline:2px solid #fff9;outline-offset:-4px}.topbar .glass-lens{display:none}
@media(max-width:1250px){.topbar nav{gap:6px}}
@media(max-width:820px){.topbar nav{gap:4px}}