/* Interaction refinements share the handbook's existing type, color and spacing. */
:root{scroll-padding-top:var(--navigation-clearance,112px)}
.navigation,.nav-links{flex-wrap:wrap}
.navigation{row-gap:8px}
.nav-links,.nav-links a,.nav-download{min-width:0}
.nav-links a,.nav-download{overflow-wrap:anywhere}
.format-tabs [data-tab]{min-width:0;text-align:center}
.nav-download:active{transition-duration:80ms}
.format-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);min-width:0}
.format-panel>*{min-width:0}
.format-panel:focus-visible{outline-offset:-3px;border-radius:inherit}
.js .format-panels{display:grid}
.js .format-panel{grid-area:1 / 1;align-self:stretch;position:relative;z-index:1}
.js .format-panel+.format-panel{border-top:0}
.js .format-panel[hidden]{display:grid;visibility:hidden;pointer-events:none;z-index:0}
.js .format-panel[hidden].is-exiting{visibility:visible}
.js .hero .is-focus-ready{animation:none!important;opacity:1;transform:none}
.document-hero{padding-top:max(180px,calc(var(--navigation-clearance,112px) + 32px))}

@media(max-width:899px){
  .navigation{gap:0 10px;padding:8px 10px 8px 16px;min-height:64px;flex-wrap:wrap;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .navigation .brand{min-width:0;max-width:100%;flex-shrink:1}
  .navigation .brand span{overflow-wrap:anywhere}
  .nav-download{margin-left:auto;min-height:44px;padding:10px 14px;border-radius:12px;max-width:calc(100% - 54px)}
  .nav-download .icon{display:none}
  .menu-toggle{flex:0 0 44px;min-height:44px;margin-left:0}
  .js .menu-toggle{display:inline-flex}
  .nav-links{order:4;flex:0 0 100%;width:100%;margin:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 4px}
  .nav-links a{font-size:16px;padding:10px 8px;min-height:48px}
  .js .nav-links{display:none}
  .js .nav-links[data-open=true],.js .nav-links.is-menu-animating{display:flex}
  .js .nav-links.is-menu-animating{overflow:clip;will-change:height,opacity}
  .navigation.menu-open{background:var(--surface)}
  :root:not(.js) .site-header{position:relative;inset:auto;margin:12px 16px}
  :root:not(.js) .navigation{max-height:none;overflow:visible}
  :root:not(.js) .hero,:root:not(.js) .document-hero{padding-top:56px}
}
@media(max-width:809px){
  .document-hero{padding-top:max(156px,calc(var(--navigation-clearance,112px) + 32px))}
}
@media(max-width:699px){
  .format-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .format-panel{grid-template-columns:minmax(0,1fr)}
  .document-hero{padding-top:max(144px,calc(var(--navigation-clearance,100px) + 32px))}
}
@media(forced-colors:active){
  .format-tabs [aria-selected=true]{outline:2px solid Highlight;outline-offset:-3px}
}
@media(max-width:359px){.navigation{column-gap:8px}}