/* Keep the 88px slot reserved: the 56px header never shifts the document.
   Height changes at the threshold; only transforms/opacity interpolate (200ms). */
.masthead-slot{height:88px;position:sticky;top:0;z-index:20;background:var(--paper)}
.masthead{position:relative;height:88px;min-height:0;padding-block:0;background:var(--paper)}
.masthead.is-compact{height:56px}
.masthead .brand{transform-origin:left center;transition:transform 200ms}
.masthead.is-compact .brand{transform:scale(.86)}
.masthead.is-compact .brand{animation:header-lock 200ms ease-out}
.masthead.is-compact .main-nav,.masthead.is-compact .search-link{animation:header-slide 200ms ease-out}
.masthead .brand-caption{transition:opacity 200ms}
.masthead.is-compact .brand-caption{opacity:0;pointer-events:none}
.main-nav{position:relative;isolation:isolate}
.main-nav a{position:relative;z-index:1}
.main-nav a:after{content:'';position:absolute;bottom:.45rem;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 200ms}
.main-nav a:hover:after,.main-nav a:focus-visible:after{transform:scaleX(1)}
.nav-indicator{position:absolute;top:0;left:0;width:1px;height:1px;background:var(--accent);border-radius:3px;z-index:-1;pointer-events:none;transform-origin:0 0;transition:transform 200ms,opacity 200ms;opacity:0}
.footer{position:relative;isolation:isolate}
.footer-lab{position:absolute;left:0;top:0;width:100%;height:200px;max-height:100%;z-index:-1;pointer-events:none}
.footer:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent)}
.footer.motion-enter:before{animation:lab-line 600ms ease-out both;transform-origin:left}
.footer.motion-enter .monogram{animation:lab-lock 450ms ease-out both}
.footer.motion-enter nav a{animation:lab-link 350ms ease-out both;animation-delay:var(--stagger,0ms)}
.footer nav a{display:inline-block}
.back-top span{display:inline-block;transition:transform 200ms}
.back-top:hover span,.back-top:focus-visible span{transform:translateY(-4px)}
.duel{max-width:640px;margin-block:2rem}
.duel h2{margin-bottom:1rem}.duel-canvas{display:block;width:100%;height:auto;aspect-ratio:2;border:1px solid var(--rule);background:var(--tint);touch-action:pan-y}
.duel.is-playing .duel-canvas{touch-action:none}
.duel-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-block:1rem}
.duel-controls p{margin:0}.duel-play{border:0}.duel-play:disabled{cursor:default;opacity:.65}
.duel-reduced{display:none}
@keyframes lab-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lab-lock{from{transform:rotate(90deg)}to{transform:rotate(0)}}
@keyframes lab-link{from{transform:translateY(8px);opacity:.6}to{transform:translateY(0);opacity:1}}
@keyframes menu-panel{from{transform:translateY(-8px);opacity:.6}to{transform:translateY(0);opacity:1}}
@keyframes header-lock{from{transform:translateY(16px) scale(1)}to{transform:translateY(0) scale(.86)}}
@keyframes header-slide{from{transform:translateY(16px)}to{transform:translateY(0)}}
@media(max-width:999px){
 .masthead{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:56px 32px;gap:0 8px}
 .masthead.is-compact{grid-template-rows:36px 20px}
 .masthead .brand{font-size:1.125rem;gap:.5rem}
 .masthead .search-link{font-size:.875rem}
 .masthead .brand-caption{display:none}
 .mobile-nav{grid-column:1/-1;align-self:stretch}
 .mobile-nav summary{padding:0;line-height:32px}
 .is-compact .mobile-nav summary{line-height:20px}
 .mobile-nav nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);border:1px solid var(--rule);padding:1rem;max-height:calc(100dvh - 100px);overflow:auto}
 .mobile-nav[open] nav{animation:menu-panel 200ms ease-out}
 .mobile-nav[open] nav a{display:block;animation:lab-link 200ms ease-out both;animation-delay:var(--stagger,0ms)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .footer-lab,.nav-indicator{display:none}
 .duel-reduced{display:block}
}