/* A quick response and a quiet, weighted finish, shared by Home and Docs. */
:root { --nav-ease: cubic-bezier(.22, 1, .36, 1); }
.navigation.has-navigation-motion {
  --nav-row-height: 68px;
  --nav-panel-height: 0px;
  --glass-radius: 34px;
  position: fixed;
  inset: 22px 0 auto;
  z-index: 25;
  isolation: isolate;
  display: block;
  width: min(1040px, calc(100% - 80px));
  height: calc(var(--nav-row-height) + var(--nav-panel-height));
  min-height: 0;
  padding: 0;
  margin: 0 auto;
  border-radius: var(--glass-radius);
  transform-origin: 50% 0;
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  transition: width .6s var(--nav-ease), height .5s var(--nav-ease),
    top .6s var(--nav-ease), border-radius .5s var(--nav-ease), box-shadow .5s,
    transform .5s var(--nav-ease), opacity .22s ease-out;
}
/* Retreat towards the top edge as a single piece of glass; reverse from the
   current pose as soon as the reader deliberately scrolls back. */
.navigation.has-navigation-motion.is-retracted {
  transform: translate3d(0, calc(-100% - 28px), 0) scale(.96, .94);
  opacity: 0;
  pointer-events: none;
  transition: width .6s var(--nav-ease), height .5s var(--nav-ease),
    top .6s var(--nav-ease), border-radius .5s var(--nav-ease), box-shadow .5s,
    transform .46s cubic-bezier(.4, 0, .2, 1), opacity .23s .08s ease-in;
}
/* Offscreen links remain keyboard reachable; focus recalls them immediately. */
.navigation.has-navigation-motion.is-keyboard-active {
  transition-duration: 0s;
}
.has-navigation-motion .navigation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  height: var(--nav-row-height);
  padding: 8px 12px 8px 28px;
  transition: height .5s var(--nav-ease), padding .5s var(--nav-ease), gap .5s var(--nav-ease);
}
.has-navigation-motion .brand { position: relative; z-index: 1; transition: transform .5s var(--nav-ease); transform-origin: left center; }
.has-navigation-motion .navigation-links,
.has-navigation-motion .character-navigation { position: static; }
.navigation.has-navigation-motion::before { background: linear-gradient(115deg, #fff9, #f6f0ff85 55%, #ffffffa3); }
.navigation.has-navigation-motion.has-liquid-refraction::before { clip-path: inset(40px var(--glass-capture-x, 0px) round var(--glass-radius)); }
.navigation.has-navigation-motion.is-compact {
  --nav-row-height: 58px;
  --glass-radius: 29px;
  top: 14px;
  width: min(960px, calc(100% - 80px));
  box-shadow: 0 0 0 .5px #21142e24, 0 12px 36px #30213f18, 0 2px 6px #30213f0c;
}
.is-compact .navigation-row { gap: 25px; padding: 6px 8px 6px 24px; }
.is-compact .brand { transform: scale(.94); }
.navigation.has-navigation-motion.is-compact::before { background: linear-gradient(115deg, #faf7ffbf, #f2eafbb8 55%, #fcfaffc7); }
.navigation.has-navigation-motion.is-character-open { --glass-radius: 30px; }
.navigation.has-navigation-motion:is(.is-character-open, .is-menu-open)::before { background: linear-gradient(115deg, #faf7fff2, #f2eafbf2 65%, #fcfafff2); }

/* One pearl travels between labels; links never move their neighbours. */
.nav-hover, .nav-current { position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0; }
.nav-hover {
  z-index: 0;
  border-radius: 24px;
  background: linear-gradient(125deg, #fff9, #e5d6f46b);
  box-shadow: inset 0 1px 0 #ffffffc2, inset 0 0 0 1px #fff5, 0 2px 6px #4a2b6c08;
  transition: transform .42s var(--nav-ease), width .42s var(--nav-ease), height .42s var(--nav-ease), opacity .2s;
}
.nav-current {
  z-index: 2;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #76519b;
  transition: transform .5s var(--nav-ease), opacity .2s;
}
.nav-hover.is-visible, .nav-current.is-visible { opacity: 1; }
.has-navigation-motion .nav-link { z-index: 1; color: var(--type-primary); transition: color .25s, transform .18s var(--nav-ease); }
.has-navigation-motion .nav-link::after { display: none; }
.has-navigation-motion .nav-link:is(:hover, :focus-visible, [aria-expanded="true"], [aria-current]) { color: var(--type-accent); }
.has-navigation-motion .nav-link:active { transform: translateY(1px) scale(.98); }
.has-navigation-motion .nav-label {
  position: relative;
  display: inline-grid;
  grid-template-areas: 'label';
  padding-inline: 2px;
  margin-inline: -2px;
  overflow: hidden;
  height: 1.22em;
  line-height: 1.22;
  vertical-align: top;
}
.has-navigation-motion .nav-label,
.has-navigation-motion .nav-label > span { font-family: inherit; font-size: inherit; color: inherit; }
.nav-label-front, .nav-label-back { display: block; grid-area: label; transition: transform .46s var(--nav-ease); }
.nav-label-back { transform: translateY(112%); }
.nav-link .nav-label-back { font-style: italic; }
@media (hover: hover) and (pointer: fine) {
  .has-navigation-motion :is(.nav-link, .nav-release):hover .nav-label-front { transform: translateY(-112%); }
  .has-navigation-motion :is(.nav-link, .nav-release):hover .nav-label-back { transform: translateY(0); }
}
.has-navigation-motion :is(.nav-link, .nav-release):focus-visible .nav-label-front { transform: translateY(-112%); }
.has-navigation-motion :is(.nav-link, .nav-release):focus-visible .nav-label-back { transform: translateY(0); }
.has-navigation-motion .nav-release {
  position: relative;
  min-height: 50px;
  transition: min-height .5s var(--nav-ease), padding .5s var(--nav-ease), background .25s, box-shadow .25s, transform .2s var(--nav-ease);
}
.has-navigation-motion.is-compact .nav-release { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.has-navigation-motion .nav-release > span:last-child { transition: transform .4s var(--nav-ease); }
.has-navigation-motion .nav-release:hover { box-shadow: inset 0 1px 0 #ffffff40, 0 5px 15px #30213f2b; }
.has-navigation-motion .nav-release:hover > span:last-child { transform: translateY(3px); }
.has-navigation-motion .nav-release:active { transform: scale(.97); }

/* The existing two destinations unfold inside the same glass surface. */
.has-navigation-motion .character-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: absolute;
  top: var(--nav-row-height);
  left: 18px;
  right: 18px;
  width: auto;
  padding: 10px 0 0;
  gap: 12px;
  background: none;
  border: 0;
  border-top: 1px solid #6d4b8b20;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-7px);
  clip-path: inset(0 0 100%);
  pointer-events: none;
  transition: opacity .18s, transform .4s var(--nav-ease), clip-path .4s var(--nav-ease), visibility 0s .4s;
}
.has-navigation-motion.is-character-open .character-links {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0);
  pointer-events: auto;
  transition: opacity .25s .06s, transform .45s var(--nav-ease), clip-path .45s var(--nav-ease), visibility 0s;
}
.has-navigation-motion .character-links a { position: relative; padding: 13px 16px; border-radius: 14px; }
.has-navigation-motion .character-links a::after { content: '↗'; position: absolute; right: 18px; top: 22px; font-size: 18px; color: var(--type-accent); transition: transform .35s var(--nav-ease); }
.has-navigation-motion .character-links a:hover::after { transform: translate(2px, -2px); }
.has-navigation-motion .character-links a:hover { background: #e5d9f263; }
.has-navigation-motion .character-links span { font-size: 22px; }
.has-navigation-motion .character-links small { margin-top: 6px; }
.has-navigation-motion .character-toggle svg { transition: transform .45s var(--nav-ease); }

/* Leave documentation and its reading rail room below the persistent navigation. */
.docs-page .docs-main { padding-top: 92px; }
.docs-page .docs-sidebar { top: 100px; }
.docs-page .docs-section { scroll-margin-top: 4px; }
html { scroll-padding-top: 100px; }

@media (max-width: 1050px) and (min-width: 768px) {
  .navigation.has-navigation-motion,
  .navigation.has-navigation-motion.is-compact { width: calc(100% - 48px); }
  .has-navigation-motion .navigation-row { gap: 20px; padding-left: 22px; }
  .has-navigation-motion .navigation-links { gap: 12px; }
}
@media (max-width: 900px) and (min-width: 768px) {
  .has-navigation-motion .navigation-row { gap: 14px; }
  .has-navigation-motion .navigation-links { gap: 8px; }
  .nav-hover { display: none; }
}
@media (max-width: 767px) {
  .navigation.has-navigation-motion,
  .navigation.has-navigation-motion.is-compact {
    --nav-row-height: 62px;
    --glass-radius: 31px;
    width: calc(100% - 32px);
    top: max(12px, env(safe-area-inset-top));
  }
  .navigation.has-navigation-motion.is-compact { --nav-row-height: 56px; --glass-radius: 28px; }
  .navigation.has-navigation-motion.is-menu-open { --glass-radius: 28px; }
  .has-navigation-motion .navigation-row { padding: 8px 12px 8px 19px; gap: 12px; }
  .has-navigation-motion .menu-toggle { display: inline-flex; z-index: 2; gap: 12px; transition: background .25s; }
  .has-navigation-motion .menu-toggle:hover { transform: none; }
  .menu-icon { position: relative; width: 14px; height: 12px; }
  .menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; width: 14px; height: 1px; background: currentColor; transition: transform .4s var(--nav-ease), top .4s var(--nav-ease); }
  .menu-icon::before { top: 3px; }
  .menu-icon::after { top: 9px; }
  .is-menu-open .menu-icon::before { top: 6px; transform: rotate(45deg); }
  .is-menu-open .menu-icon::after { top: 6px; transform: rotate(-45deg); }
  .nav-hover, .nav-current { display: none; }
  .has-navigation-motion .navigation-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-row-height);
    left: 12px;
    right: 12px;
    max-height: calc(100svh - 105px - env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 0 0;
    gap: 2px;
    border: 0;
    border-top: 1px solid #6d4b8b20;
    border-radius: 0;
    box-shadow: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    clip-path: inset(0 0 100%);
    pointer-events: none;
    transition: opacity .18s, transform .4s var(--nav-ease), clip-path .4s var(--nav-ease), visibility 0s .4s;
  }
  .has-navigation-motion.is-menu-open .navigation-links { visibility: visible; opacity: 1; transform: none; clip-path: inset(0); pointer-events: auto; transition-delay: .04s, 0s, 0s, 0s; }
  .has-navigation-motion .navigation-links .nav-link { padding: 12px 14px; min-height: 48px; font-size: 22px; }
  .has-navigation-motion .character-toggle { justify-content: space-between; }
  .has-navigation-motion .nav-link[aria-current] { background: #e5d9f263; border-radius: 14px; }
  .has-navigation-motion .character-links {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: none;
    grid-template-columns: 1fr;
    padding: 0 0 8px 10px;
    border: 0;
    gap: 0;
  }
  .has-navigation-motion.is-character-open .character-links { display: grid; }
  .has-navigation-motion .character-links span { font-size: 18px; }
  .has-navigation-motion .character-links a { padding: 12px 14px; }
  .has-navigation-motion .nav-release,
  .has-navigation-motion.is-compact .nav-release { margin-top: 10px; min-height: 48px; font-size: 21px; }
  .docs-page .docs-main { padding-top: 78px; }
  .docs-page .docs-sidebar { top: 82px; }
  .docs-page .docs-section { scroll-margin-top: 68px; }
}

/* Supporting browsers preserve the navigation between the two documents. */
@view-transition { navigation: auto; }
.has-navigation-motion { view-transition-name: idore-navigation; }
::view-transition-group(idore-navigation) { animation-duration: .45s; animation-timing-function: var(--nav-ease); }
::view-transition-old(root) { animation: nav-page-out .18s ease-out both; }
::view-transition-new(root) { animation: nav-page-in .4s var(--nav-ease) both; }
@keyframes nav-page-out { to { opacity: 0; } }
@keyframes nav-page-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .navigation.has-navigation-motion,
  .navigation.has-navigation-motion *,
  .navigation.has-navigation-motion::before,
  .navigation.has-navigation-motion.is-compact::before,
  .navigation.has-navigation-motion::after { transition: none !important; animation: none !important; }
  .has-navigation-motion :is(.nav-link, .nav-release):is(:hover, :focus-visible) .nav-label-front { transform: none; }
  .has-navigation-motion .nav-label-back { display: none; }
  .has-navigation-motion .nav-release:hover > span:last-child { transform: none; }
  html { scroll-behavior: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (forced-colors: active) {
  .nav-hover { display: none; }
  .nav-current { background: Highlight; }
  .has-navigation-motion .nav-link[aria-current] { text-decoration: underline; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .navigation.has-navigation-motion::before,
  .navigation.has-navigation-motion:is(.is-character-open, .is-menu-open)::before {
    background: #f4eefb;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-hover { background: #e8dcf4; box-shadow: none; }
}