/* The same rotating mark and header alignment on every page. */
.topline{position:relative;container-type:inline-size;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center;--header-mark-size:min(76.23px,calc((100cqw - 68px)/5.6))}
.topline .wordmark{grid-column:1;grid-row:1;font-size:var(--header-mark-size)}
.topline nav{grid-column:1 / -1;grid-row:2;height:44px}
#pixelToggle{position:relative;grid-column:2;grid-row:1;justify-self:end;width:max(44px,calc(var(--header-mark-size)*.5));height:max(44px,calc(var(--header-mark-size)*.84));padding:0;display:grid;place-items:center end;touch-action:manipulation}
#pixelToggle canvas{position:absolute;right:0;top:50%;display:block;width:calc(var(--header-mark-size)*.7);height:calc(var(--header-mark-size)*1.2);transform:translate(calc(var(--header-mark-size)*.08),calc(-50% + var(--header-mark-size)*.1));opacity:0;pointer-events:none}
body.pixel-mode #pixelToggle canvas{width:calc(var(--header-mark-size)*.63);height:calc(var(--header-mark-size)*1.05);transform:translate(calc(var(--header-mark-size)*.08),calc(-50% + var(--header-mark-size)*.02))}
#pixelToggle .pixel-icon-fallback{grid-area:1/1;height:calc(var(--header-mark-size)*.7);width:auto;pointer-events:none}
#pixelToggle.icon-ready canvas{opacity:1}
#pixelToggle.icon-ready .pixel-icon-fallback{display:none}
#pixelToggle:active{opacity:.65}
body.pixel-mode #pixelToggle .pixel-icon-fallback{filter:invert(1)}
@media(min-width:701px){.play-page .topline{width:calc(100% - var(--catalog-width) - var(--gutter))}}
@media(max-width:700px){.topline{column-gap:20px;--header-mark-size:min(76.23px,calc((100cqw - 64px)/5.6))}}
#pixelToggle[aria-busy="true"]{opacity:.4;cursor:progress}