html { scrollbar-gutter: stable; }
main:focus { outline: none; }
html.page-arriving::before { content: ''; position: fixed; inset: 0; background: #080b10; z-index: 199; }
.brand-transition { position: fixed; inset: 0; z-index: 200; overflow: hidden; isolation: isolate; --accent: #85ceff; }
.brand-transition[hidden] { display: none; }
.brand-curtain { position: absolute; left: 0; right: 0; height: 50.1%; background: #080b10; will-change: transform; }
.brand-curtain-top { top: 0; }.brand-curtain-bottom { bottom: 0; }
.transition-signature { position: absolute; top: 50%; left: 0; right: 0; margin-top: -1.35em; text-align: center; font: 500 clamp(42px,7vw,100px)/1.2 var(--display); letter-spacing: -.065em; color: #85ceff; perspective: 700px; }
.signature-mask { display: inline-block; overflow: clip; vertical-align: top; padding: .08em .055em; margin: -.08em -.055em; }
.signature-glyph { display: inline-block; transform-origin: 50% 100%; opacity: 0; will-change: transform,opacity; color: #85ceff; }
.signature-accent { color: #85ceff; }
.transition-rule { position: absolute; top: 50%; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg,transparent,#a0daff,transparent); transform: scaleX(0); opacity: 0; }
.brand-curtain-top { box-shadow: 0 1px 0 #b5ddff15; }
.brand-curtain-bottom { box-shadow: 0 -1px 0 #b5ddff15; }