.identity-brand {
  position: relative !important;
  margin-inline-start: 38px !important;
}

.brand-symbol {
  position: absolute;
  inset: 50% auto auto -38px;
  width: 28px;
  height: 28px;
  display: block;
  color: inherit;
  background: currentColor;
  -webkit-mask: var(--brand-symbol-url) center / contain no-repeat;
  mask: var(--brand-symbol-url) center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

.identity-directory {
  position: sticky;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 9px clamp(12px, 2vw, 28px);
  color: var(--project-text, #f4efe6);
  background: color-mix(in srgb, var(--project-bg, #111) 94%, transparent);
  border-bottom: 1px solid var(--project-line, rgba(255,255,255,.16));
  backdrop-filter: blur(18px);
  font-family: var(--project-meta, ui-monospace, monospace);
}

.identity-directory summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--project-bg, #111);
  background: var(--project-accent, #d8ff68);
  border: 1px solid currentColor;
  border-radius: 999px;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--project-bg, #111) 34%, transparent);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  list-style: none;
  text-transform: uppercase;
}

.identity-directory summary::-webkit-details-marker { display: none; }
.identity-directory summary::before { content: ""; width: 7px; height: 7px; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.identity-directory[open] summary::before { border-radius: 1px; transform: rotate(45deg); }

.identity-directory__panel {
  position: absolute;
  inset: calc(100% + 6px) clamp(12px, 2vw, 28px) auto auto;
  width: min(330px, calc(100vw - 24px));
  max-height: min(580px, calc(100svh - 100px));
  overflow: auto;
  padding: 10px;
  color: var(--project-text, #f4efe6);
  background: color-mix(in srgb, var(--project-bg, #111) 94%, transparent);
  border: 1px solid var(--project-line, rgba(255,255,255,.2));
  border-radius: 18px;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--project-bg, #111) 54%, transparent);
  backdrop-filter: blur(22px);
}

.identity-directory__panel p { margin: 5px 8px 12px; color: var(--project-muted, #aaa); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.identity-directory__panel nav { display: grid; }
.identity-directory__panel a { min-height: 44px; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; padding: 8px 10px; color: inherit; border-top: 1px solid var(--project-line, rgba(255,255,255,.16)); text-decoration: none; font-size: 11px; letter-spacing: .04em; }
.identity-directory__panel a:first-child { border-top: 0; }
.identity-directory__panel a span { color: var(--project-muted, #aaa); font-size: 9px; }
.identity-directory__panel a:hover,
.identity-directory__panel a[aria-current="page"] { color: var(--project-accent, #d8ff68); background: color-mix(in srgb, var(--project-accent, #d8ff68) 8%, transparent); }

@media (max-width: 520px) {
  .identity-brand { margin-inline-start: 31px !important; }
  .brand-symbol { left: -31px; width: 23px; height: 23px; }
  .identity-directory {
    padding: 8px 12px;
  }
  .identity-directory summary { min-height: 40px; padding: 9px 13px; }
  .identity-directory__panel {
    inset: calc(100% + 6px) 8px auto auto;
    max-height: calc(100svh - 128px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .identity-directory *, .brand-symbol { transition: none !important; }
}