#fd-nav{
  color-scheme: dark;
  --fdn-surface: rgba(20,27,39,.94);
  --fdn-border: rgba(255,255,255,.30);
  --fdn-fg: #e9eef6;
  --fdn-fg-muted: #a3b0c2;
  --fdn-hover: rgba(255,255,255,.10);
  --fdn-accent: #7fbdea;
  --fdn-accent-fg: #10243a;
  --fdn-shadow: 0 10px 34px rgba(8,14,24,.34), 0 2px 6px rgba(8,14,24,.22);
  --fdn-h: 38px; --fdn-gap: 14px;
  position: fixed; inset: auto var(--fdn-gap) var(--fdn-gap) auto; z-index: 2147483000;
  display: flex; align-items: center; gap: 2px;
  height: var(--fdn-h); padding: 0 5px;
  border: 1px solid var(--fdn-border); border-radius: 999px;
  background: var(--fdn-surface);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--fdn-shadow);
  font: 500 12px/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fdn-fg); box-sizing: border-box; -webkit-font-smoothing: antialiased;
  text-align: left;
}
#fd-nav *, #fd-nav *::before, #fd-nav *::after{ box-sizing: border-box; }
#fd-nav [hidden]{ display: none !important; }
#fd-nav button, #fd-nav a{ font: inherit; font-family: inherit; letter-spacing: normal; text-transform: none; }
/* the compare pair, geometry lifted from the kit's Original/Frost segment */
#fd-nav .fdn-seg{
  display:inline-flex; align-items:center; gap:1px; padding:2px;
  border-radius:999px; background:var(--fdn-hover);
}
#fd-nav .fdn-seg-btn{
  appearance:none; -webkit-appearance:none; margin:0; border:0; background:transparent;
  display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:999px;
  font:600 11px/1 inherit; font-family:inherit; color:var(--fdn-fg); cursor:pointer;
  white-space:nowrap; text-decoration:none;
  transition:background-color .12s ease, color .12s ease;
}
#fd-nav .fdn-seg-btn:hover{ background:var(--fdn-hover); }
#fd-nav .fdn-seg-btn[aria-pressed="true"]{ background:var(--fdn-accent); color:var(--fdn-accent-fg); }
#fd-nav .fdn-caret{
  appearance:none; -webkit-appearance:none; margin:0 0 0 1px; border:0; padding:0;
  display:inline-grid; place-items:center; width:22px; height:26px; border-radius:999px;
  background:transparent; color:var(--fdn-fg-muted); cursor:pointer;
  transition:background-color .12s ease, color .12s ease;
}
#fd-nav .fdn-caret:hover{ background:var(--fdn-hover); color:var(--fdn-fg); }
#fd-nav .fdn-caret svg{ width:13px; height:13px; display:block; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
#fd-nav .fdn-step{ display:inline-flex; align-items:center; gap:1px; }
#fd-nav .fdn-ib{
  appearance:none; -webkit-appearance:none; margin:0; border:0; padding:0;
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px;
  background:transparent; color:var(--fdn-fg-muted); cursor:pointer; text-decoration:none;
  transition:background-color .12s ease, color .12s ease;
}
#fd-nav .fdn-ib:hover{ background:var(--fdn-hover); color:var(--fdn-fg); }
#fd-nav .fdn-ib svg{ width:16px; height:16px; display:block; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#fd-nav .fdn-name{
  display:inline-flex; align-items:baseline; gap:5px; min-width:96px; max-width:190px;
  padding:0 6px; font-weight:600; color:var(--fdn-fg); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
#fd-nav .fdn-pos{ font-size:10px; font-weight:500; color:var(--fdn-fg-muted); flex:none; }
#fd-nav .fdn-div{ width:1px; height:18px; margin:0 4px; background:var(--fdn-border); flex:none; }
#fd-nav .fdn-wrap{ position:relative; display:inline-flex; }
#fd-nav .fdn-menu{
  position:absolute; bottom:calc(100% + 10px); min-width:248px;
  max-height:min(64vh,460px); overflow:auto; padding:6px;
  border:1px solid var(--fdn-border); border-radius:12px; background:var(--fdn-surface);
  box-shadow:var(--fdn-shadow);
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
}
#fd-nav .fdn-menu--right{ right:0; }
#fd-nav .fdn-menu--left{ left:0; }
#fd-nav .fdn-hd{ display:flex; align-items:center; gap:6px; padding:2px 8px 6px;
  font-size:11px; font-weight:600; color:var(--fdn-fg-muted); }
#fd-nav .fdn-row{
  display:flex; align-items:center; gap:8px; width:100%; min-height:32px; padding:5px 8px;
  border:0; border-radius:8px; background:transparent; color:var(--fdn-fg);
  text-align:left; text-decoration:none; cursor:pointer;
}
#fd-nav .fdn-row:hover{ background:var(--fdn-hover); }
#fd-nav .fdn-row-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
#fd-nav .fdn-row-name{ font-size:12px; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
#fd-nav .fdn-row-note{ font-size:10.5px; font-weight:400; color:var(--fdn-fg-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#fd-nav .fdn-tick{ flex:none; width:14px; height:14px; color:var(--fdn-accent); }
#fd-nav .fdn-tick svg{ width:14px; height:14px; display:block; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: reduce){ #fd-nav *{ transition:none !important; } }
@media print{ #fd-nav{ display:none !important; } }