.cn-directory {
  --cn-ink: #132c40;
  --cn-subtle: #43576a;
  --cn-line: #c8d4dc;
  --cn-active: #154c6a;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(1.9rem, 5vw, 4.3rem) clamp(1rem, 4vw, 3.5rem);
  box-sizing: border-box;
  background: #f2f6f8;
  border-block: 1px solid #d6e0e6;
  color: var(--cn-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
  text-align: start;
  scroll-margin-block-start: 1rem;
}
.cn-directory *, .cn-directory *::before, .cn-directory *::after { box-sizing: border-box; }
.cn-directory [hidden] { display: none !important; }
.cn-directory .cn-shell { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0; }
.cn-directory .cn-heading { display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(19rem, 1fr); gap: clamp(1.1rem, 4vw, 4rem); align-items: center; margin: 0 0 1.45rem; }
.cn-directory .cn-title { max-width: 19ch; margin: 0; padding: 0; color: var(--cn-ink); font: 700 clamp(2rem, 4vw, 3.4rem)/1.04 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing: -.056em; text-transform: none; }
.cn-directory .cn-tools { min-width: 0; }
.cn-directory .cn-label { display: block; margin: 0 0 .42rem; font-size: .86rem; line-height: 1.4; font-weight: 650; color: var(--cn-ink); }
.cn-directory .cn-search { display: flex; align-items: center; gap: .7rem; padding-inline: .8rem; background: #fff; border: 1px solid #8499a6; border-radius: .65rem; }
.cn-directory .cn-search:focus-within { outline: 3px solid #397595; outline-offset: 2px; }
.cn-directory .cn-search > svg { flex: 0 0 1.2rem; color: var(--cn-active); }
.cn-directory .cn-search input { display: block; flex: 1; min-width: 0; width: 100%; min-height: 2.9rem; margin: 0; padding: .55rem 0; font: 400 1rem/1.35 system-ui,sans-serif; color: var(--cn-ink); background: transparent; box-shadow: none; border: 0; outline: 0; border-radius: 0; }
.cn-directory .cn-search input:focus { box-shadow:none; outline:0; }
.cn-directory .cn-search input::placeholder { color: #637385; }
.cn-directory .cn-suggestions { display:flex; flex-wrap:wrap; gap: .2rem .6rem; margin-top: .35rem; }
.cn-directory .cn-suggestions button, .cn-directory .cn-results button { appearance:none; display:inline-flex; align-items:center; min-height:2rem; min-width:0; margin:0; padding:.2rem .05rem; border:0; border-radius:2px; box-shadow:none; background:transparent; color:var(--cn-active); font:600 .8rem/1.35 system-ui,sans-serif; letter-spacing:0; text-transform:none; text-decoration:underline; text-decoration-color:#9aadb8; text-underline-offset:.2em; cursor:pointer; }
.cn-directory .cn-results { display:flex; justify-content:space-between; gap:.6rem; align-items:center; min-height:2rem; margin:0 0 .75rem; color:var(--cn-subtle); font-size:.9rem; }
.cn-directory .cn-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); gap:.65rem; }
.cn-directory .cn-item { min-width:0; margin:0; padding:0; list-style:none; }
.cn-directory .cn-card { display:grid; grid-template-columns: auto minmax(0,1fr) auto; height:100%; align-items:center; gap:.7rem; padding:.8rem .85rem; border:1px solid var(--cn-line); border-radius:.75rem; background:#fff; color:var(--cn-ink); font-family:inherit; text-decoration:none; box-shadow:none; }
.cn-directory .cn-card:focus-visible, .cn-directory button:focus-visible { outline: 3px solid #226481; outline-offset: 2px; }
.cn-directory .cn-card:hover { border-color:#668396; background:#fafcfd; color:var(--cn-ink); }
.cn-directory .cn-icon { display:grid; place-items:center; width:2.55rem; height:2.55rem; border-radius:.65rem; }
.cn-directory .cn-icon svg { display:block; width:1.72rem; height:1.72rem; }
.cn-directory .cn-tone-blue { background:#e0eaf6; color:#214b72; }
.cn-directory .cn-tone-amber { background:#ffedcf; color:#874100; }
.cn-directory .cn-tone-violet { background:#eee7fb; color:#573a8d; }
.cn-directory .cn-tone-teal { background:#daf0f4; color:#13576a; }
.cn-directory .cn-tone-rose { background:#fbe8ed; color:#95314e; }
.cn-directory .cn-tone-green { background:#deefe9; color:#1e6350; }
.cn-directory .cn-tone-red { background:#fce7e2; color:#9c332a; }
.cn-directory .cn-tone-orange { background:#feeadb; color:#8c431d; }
.cn-directory .cn-tone-cyan { background:#ddf0ee; color:#006360; }
.cn-directory .cn-tone-indigo { background:#e7e8fa; color:#444186; }
.cn-directory .cn-tone-leaf { background:#e6edda; color:#365820; }
.cn-directory .cn-wordmark { min-width:0; display:grid; gap:.14rem; overflow-wrap:anywhere; }
.cn-directory .cn-wordmark strong { color: var(--cn-ink); font:700 .99rem/1.3 system-ui,sans-serif; letter-spacing:-.024em; }
.cn-directory .cn-wordmark > span { color:var(--cn-subtle); font:400 .81rem/1.4 system-ui,sans-serif; }
.cn-directory .cn-arrow { align-self:center; color:var(--cn-active); font:600 1.1rem/1 system-ui,sans-serif; }
@media(max-width:42rem) {
  .cn-directory .cn-heading { grid-template-columns:1fr; gap:1rem; margin-bottom:.9rem; }
  .cn-directory .cn-suggestions button, .cn-directory .cn-results button { min-height:2.5rem; }
  .cn-directory .cn-cards { gap:.45rem; }
}