* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-body); }
.directory { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) var(--page-gutter) var(--sp-7); }
.directory a { color: var(--color-accent); }
.directory-breadcrumb { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--sp-5); }
.directory-intro { margin-bottom: var(--sp-5); }
.directory-intro h1 { font-family: var(--font-head); font-size: var(--text-3xl); line-height: var(--line-heading); letter-spacing: var(--tracking-heading); margin: var(--sp-3) 0; }
.directory-intro > p:not(.mono-meta) { color: var(--color-text-muted); font-size: var(--text-lg); margin: var(--sp-3) 0 var(--sp-4); }
.directory-controls { padding: var(--sp-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.directory-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.directory-field { min-width: 0; }
.directory-field label { display: block; margin-bottom: var(--sp-2); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.directory input, .directory select, .directory button { font: inherit; }
.directory input, .directory select { width: 100%; min-height: var(--control-min); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: var(--text-base); }
.directory button { cursor: pointer; min-height: var(--control-min); }
.directory-category-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: var(--sp-4) 0 var(--sp-2); scroll-margin-top: var(--sp-8); }
.directory .chips { flex-wrap: wrap; }
.directory-sort-note, .directory-basis { font-size: var(--text-sm); color: var(--color-text-muted); }
.directory-sort-note { margin: var(--sp-3) 0 0; }
.directory-results-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.directory-results-bar h2 { font-family: var(--font-head); font-size: var(--text-xl); margin: 0; }
#directory-reset, #directory-retry { border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: var(--sp-2) var(--sp-3); background: var(--color-surface); color: var(--color-accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.directory-basis { margin: var(--sp-2) 0 var(--sp-4); }
.directory-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.directory-grid .tool-card { min-width: 0; color: var(--color-text); height: 100%; }
.directory-grid .tool-card__name { min-width: 0; overflow-wrap: anywhere; }
.directory-grid .tool-card__name .demo-badge { display: block; width: fit-content; margin: var(--sp-1) 0 0; white-space: normal; }
.directory-empty { padding: var(--sp-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.directory-empty h3 { margin-top: 0; }
.directory [hidden] { display: none !important; }
.directory :focus-visible, .directory-skip:focus { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.directory-skip { position: absolute; left: var(--sp-3); top: var(--sp-3); transform: translateY(-200%); z-index: var(--z-dialog); padding: var(--sp-3); background: var(--color-surface); color: var(--color-accent); }
.directory-skip:focus { transform: none; }
@media (min-width: 48rem) { .directory-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }