/* Independent identity additions: leave original design CSS unchanged. */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-symbol { display: block; width: 30px; height: 30px; flex: none; border-radius: 8px; }
@media (max-width: 600px) {
  .brand { gap: 8px; }
  .brand-symbol { width: 27px; height: 27px; }
}

/* Internal design navigation. Included only when site.show_reference is true. */
.design-shortcuts { display: block; width: 100%; padding: 11px 0; background: var(--soft); border-bottom: 1px solid var(--line); }
.design-shortcuts .design-shortcuts__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.design-shortcuts__label { color: var(--muted); font-size: 11px; letter-spacing: .08em; font-weight: 650; }
.design-shortcuts__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.design-shortcuts__link { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; padding: 7px 12px; text-decoration: none; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.4; transition: border-color .15s, background-color .15s; }
.design-shortcuts__link:hover, .design-shortcuts__link:focus-visible { border-color: var(--accent); color: var(--accent); }
.design-shortcuts .design-shortcuts__link[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
@media (max-width: 600px) {
  .design-shortcuts { order: initial; }
  .design-shortcuts__label { flex-basis: 100%; }
  .design-shortcuts__links { width: 100%; }
  .design-shortcuts__link { padding: 8px 10px; }
}