.fr-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  margin-bottom: 1.25rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--bone) 100%);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fffc),
    0 0 0 1px var(--stone-200),
    0 4px 20px #0000000f;
}

.fr-nav__bar {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .625rem;
}

.fr-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .25rem .5rem .25rem .25rem;
  margin-right: .375rem;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.fr-nav__brand:hover {
  background: var(--ivory);
}

.fr-nav__crest {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--gold);
  background: linear-gradient(180deg, #2c2318 0%, #16130f 100%);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px rgb(var(--gold-rgb) / .45);
}

.fr-nav__crest svg {
  width: 1rem;
  height: 1rem;
}

.fr-nav__name {
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--stone-900);
  white-space: nowrap;
}

.fr-nav__links {
  display: flex;
  align-items: center;
  gap: .125rem;
}

.fr-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .5rem .625rem;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--stone-500);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.fr-nav__link:hover {
  color: var(--stone-900);
  background: var(--ivory);
}

.fr-nav__link svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
  opacity: .7;
  transition: transform var(--transition-base);
}

.fr-nav__link.is-active {
  color: var(--gold);
}

.fr-nav__link.is-active:after {
  content: "";
  position: absolute;
  right: .625rem;
  bottom: .1875rem;
  left: .625rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px rgb(var(--gold-rgb) / .5);
}

.fr-nav__link .fr-dot {
  width: .3125rem;
  height: .3125rem;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 6px rgb(var(--gold-rgb) / .7);
}

.fr-nav__spacer {
  flex: 1 1 auto;
}

.fr-nav__icons {
  display: flex;
  align-items: center;
  gap: .1875rem;
}

.fr-ico {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--stone-500);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), transform .18s cubic-bezier(.16, 1, .3, 1);
}

.fr-ico:hover {
  color: var(--stone-900);
  background: var(--ivory);
}

.fr-ico:active {
  transform: scale(.92);
}

.fr-ico.is-on {
  color: var(--gold);
  background: var(--gold-bg);
}

.fr-ico svg {
  width: 1.0625rem;
  height: 1.0625rem;
  transform-origin: 50% 15%;
}

.fr-ico--bell:hover svg {
  animation: frBellSwing .6s ease;
}

@keyframes frBellSwing {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-13deg); }
  45% { transform: rotate(10deg); }
  70% { transform: rotate(-5deg); }
  88% { transform: rotate(2deg); }
}

.fr-ico__count {
  position: absolute;
  top: .1875rem;
  right: .1875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 .25rem;
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: 700;
  line-height: 1;
  color: #241c0c;
  background: linear-gradient(180deg, #f2d894 0%, #cba750 55%, #a8842f 100%);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 #ffffffa6,
    0 0 0 2px var(--white),
    0 2px 6px rgb(var(--gold-rgb) / .35);
}

.fr-me {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .1875rem .5rem .1875rem .1875rem;
  margin-left: .1875rem;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.fr-me:hover {
  background: var(--ivory);
}

.fr-me.is-on {
  background: var(--gold-bg);
  box-shadow: 0 0 0 1px rgb(var(--gold-rgb) / .35);
}

.fr-me__ava {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: .6875rem;
  font-weight: 700;
  color: #241c0c;
  background: linear-gradient(135deg, #8b6914 0%, #e8c96a 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px rgb(var(--gold-rgb) / .4);
}

.fr-me__name {
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--stone-700);
  white-space: nowrap;
}

.fr-me__chev {
  width: .75rem;
  height: .75rem;
  color: var(--stone-400);
  transition: transform var(--transition-base);
}

.fr-me.is-on .fr-me__chev {
  transform: rotate(180deg);
}

.fr-pop {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 70;
  width: 17rem;
  padding: .3125rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--bone) 100%);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px var(--stone-200),
    0 16px 40px #00000026;
}

.fr-pop--wide {
  width: 22rem;
}

.fr-pop__head {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .5rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--stone-100);
}

.fr-pop__ava {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 700;
  color: #241c0c;
  background: linear-gradient(135deg, #8b6914 0%, #e8c96a 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px rgb(var(--gold-rgb) / .4);
}

.fr-pop__name {
  display: block;
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 700;
  color: var(--stone-900);
}

.fr-pop__rank {
  display: block;
  margin-top: .125rem;
  font-size: .6875rem;
  color: var(--stone-400);
}

.fr-pop__item {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .5rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  text-align: left;
  color: var(--stone-600);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.fr-pop__item svg {
  width: .9375rem;
  height: .9375rem;
  flex-shrink: 0;
  opacity: .75;
}

.fr-pop__item:hover {
  color: var(--stone-900);
  background: var(--ivory);
}

.fr-pop__item b {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  color: var(--gold);
}

.fr-pop__item--danger {
  color: var(--red);
}

.fr-pop__item--danger:hover {
  color: var(--red);
  background: var(--red-bg);
}

.fr-pop__sep {
  height: 1px;
  margin: .25rem;
  background: var(--stone-200);
}

.fr-navnode {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .5rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.fr-navnode:hover {
  background: var(--ivory);
}

.fr-navnode__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--stone-400);
  background: var(--ivory);
  border-radius: var(--radius-sm);
}

.fr-navnode:hover .fr-navnode__mark {
  color: var(--gold);
}

.fr-navnode__mark svg {
  width: .875rem;
  height: .875rem;
}

.fr-navnode__mark:has(img) {
  background: none;
  border-radius: 0;
}

.fr-navnode__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fr-navnode__name {
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--stone-800);
}

.fr-navnode__sub {
  margin-top: .0625rem;
  font-size: .625rem;
  color: var(--stone-400);
}

.fr-navnode__new {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  color: var(--gold);
}

.fr-burger {
  display: none;
}

.fr-drawer {
  position: fixed;
  inset: 0;
  z-index: 1300;
}

.fr-drawer__back {
  position: absolute;
  inset: 0;
  background: #00000073;
  backdrop-filter: blur(3px);
}

.fr-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(20rem, 88vw);
  padding: 1rem;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--white) 0%, var(--bone) 100%);
  box-shadow: 0 0 40px #00000040;
}

.fr-drawer__head {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding-bottom: 1rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--stone-200);
}

.fr-drawer__close {
  margin-left: auto;
}

.fr-drawer__label {
  display: block;
  margin: 1rem 0 .5rem .5rem;
  font-family: var(--font-heading);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-400);
}

.fr-demo {
  padding: 2rem 1.5rem;
  text-align: center;
  background: linear-gradient(180deg, var(--white) 0%, var(--bone) 100%);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fffc),
    0 0 0 1px var(--stone-200),
    0 0 0 4px var(--ivory),
    0 0 0 5px var(--stone-200),
    0 8px 30px #0000000f;
}

.fr-demo + .fr-demo {
  margin-top: 1rem;
}

.fr-demo p {
  margin: 0;
  font-size: .8125rem;
  color: var(--stone-400);
}

[data-theme="dark"] .fr-nav,
[data-theme="dark"] .fr-pop,
[data-theme="dark"] .fr-drawer__panel,
[data-theme="dark"] .fr-demo {
  background: linear-gradient(180deg, var(--bone) 0%, var(--white) 100%);
}

[data-theme="dark"] .fr-nav {
  box-shadow: inset 0 1px 0 #ffffff08, 0 0 0 1px var(--stone-200), 0 4px 20px #00000040;
}

[data-theme="dark"] .fr-pop {
  box-shadow: inset 0 1px 0 #ffffff0f,
    0 0 0 1px var(--stone-300),
    0 16px 40px #00000073;
}

[data-theme="dark"] .fr-nav__link:hover,
[data-theme="dark"] .fr-ico:hover,
[data-theme="dark"] .fr-me:hover,
[data-theme="dark"] .fr-pop__item:hover,
[data-theme="dark"] .fr-navnode:hover,
[data-theme="dark"] .fr-nav__brand:hover {
  background: var(--parchment);
}

[data-theme="dark"] .fr-navnode__mark {
  background: var(--parchment);
}

[data-theme="dark"] .fr-pop__head,
[data-theme="dark"] .fr-drawer__head {
  border-color: var(--stone-200);
}

[data-theme="dark"] .fr-ico__count {
  box-shadow: inset 0 1px 0 #ffffffa6, 0 0 0 2px var(--bone), 0 2px 6px rgb(var(--gold-rgb) / .35);
}

@media (max-width: 68rem) {
  .fr-nav__links {
    display: none;
  }
  .fr-burger {
    display: flex;
  }
}

@media (max-width: 40rem) {
  .fr-me__name,
  .fr-me__chev {
    display: none;
  }
  .fr-me {
    padding: .1875rem;
  }
  .fr-nav__name {
    display: none;
  }
  .fr-pop,
  .fr-pop--wide {
    position: fixed;
    top: auto;
    right: .625rem;
    bottom: .625rem;
    left: .625rem;
    width: auto;
    max-height: 70vh;
    overflow-y: auto;
  }
}

.c-navbar__left {
  display: none;
}

.c-navbar__actions {
  flex: 1 1 auto;
}

.fr-hdr {
  display: flex;
  align-items: center;
  gap: .125rem;
  min-width: 0;
  margin-right: auto;
}

.fr-hdr__wrap {
  position: relative;
}

.fr-hdr__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4375rem .5625rem;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--stone-500);
  text-decoration: none;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.fr-hdr__link:hover {
  color: var(--stone-800);
  background: rgb(var(--gold-rgb) / .08);
}

.fr-hdr__link.is-active {
  color: var(--gold);
}

.fr-hdr__link svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.fr-hdr__ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--stone-500);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.fr-hdr__ico:hover {
  color: var(--stone-800);
  background: rgb(var(--gold-rgb) / .08);
}

.fr-hdr__ico svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.fr-hdr__count {
  position: absolute;
  top: .125rem;
  right: .125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: .9375rem;
  height: .9375rem;
  padding: 0 .1875rem;
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: 700;
  line-height: 1;
  color: #241c0c;
  background: linear-gradient(180deg, #f2d894 0%, #cba750 55%, #a8842f 100%);
  border-radius: var(--radius-full);
}

.fr-hdr__pop {
  right: auto;
  left: 0;
}

.fr-hdr__menucount {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--gold);
}

@media (min-width: 68.0625rem) {
  .fr-nav {
    display: none;
  }
}

@media (max-width: 68rem) {
  .fr-hdr__link .fr-hdr__text {
    display: none;
  }
  .fr-hdr__link {
    padding: .4375rem;
  }
}

@media (max-width: 40rem) {
  .fr-hdr {
    display: none;
  }
}