:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.44rem; --text-2xl: 1.728rem; --text-3xl: 2.074rem;
  --text-display-s: 1.44rem; --text-display: 1.728rem; --text-section: 1.2rem; --text-title: 1rem; --text-lead: 1rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(84% 0.012 245); --color-paper-2: oklch(81% 0.012 245); --color-paper-3: oklch(77% 0.012 245);
  --color-ink: oklch(16% 0.020 245); --color-ink-2: oklch(24% 0.018 245); --color-muted: oklch(38% 0.016 245);
  --color-rule: oklch(73% 0.013 240); --color-rule-2: oklch(32% 0.018 240);
  --color-accent: oklch(45% 0.180 350); --color-accent-2: oklch(37% 0.160 350); --color-accent-ink: oklch(97% 0.006 245); --color-focus: oklch(46% 0.190 350);
  --color-sheet: oklch(93.5% 0.008 245);
  --color-category-bg: oklch(89% 0.045 350);
  --color-category-text: oklch(32% 0.075 350);
  --font-display: "Space Mono", ui-monospace, monospace;
  --font-body: ui-serif, Georgia, serif;
  --font-outlier: ui-monospace, monospace;
  --radius-card: 0; --radius-pill: 2px; --rule-hair: 1px; --rule-bar: 2px; --shadow-card: none;
  --tracking-display: -0.02em; --display-weight: 600;
}


@font-face {
  font-family: "Nabla";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/nabla-latin-full-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/space-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-mono-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-palette-values --nabla-site {
  font-family: "Nabla";
  base-palette: 0;
  override-colors: 0 oklch(45% 0.180 350), 1 oklch(37% 0.160 350), 2 oklch(45% 0.180 350), 3 oklch(24% 0.018 245), 4 oklch(45% 0.180 350), 5 oklch(77% 0.013 245), 6 oklch(45% 0.180 350), 7 oklch(81% 0.012 245), 8 oklch(73% 0.013 245), 9 oklch(84% 0.012 245);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
nav, button, input[type="submit"], input[type="button"], select { font-family: var(--font-display); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.result-count, .vote-count { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }


/* Hallmark · shape: app screen · genre: editorial · theme: Almanac (deal 1/3, technical-field-manual-slash-help-75a5) · nav: edge-aligned masthead · signature: the searchable skills register · states: full, filtered, empty · axes: mid/grotesk-sans/chromatic-magenta · posture: restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, use real member counts and named source authors to ground the register. */
/* Hallmark · finish-review: subagent · 2 findings · 2 resolved · render: 0 FAIL, 0 REFLEX, 0 WARN */



:root {
  --container: 1280px;
  --gutter: 48px;
  --gap-columns: var(--space-xl);
  --text-display: 4.5rem;
  --text-lead: 1.2rem;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a { text-decoration-color: var(--color-accent); }

.masthead {
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}

.masthead .container, .colophon .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--space-2xl);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  font: var(--display-weight) var(--text-xl)/1 var(--font-display);
  font-size: clamp(1.875rem, 6vw, 2.5rem);
  text-decoration: none;
}
.brand-mark { color: var(--color-accent); }
.brand-word { font-family: "Nabla", fantasy; font-palette: --nabla-site; font-weight: 400; font-synthesis: none; }

nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.skip {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  z-index: var(--z-raised);
  background: var(--color-sheet);
  padding: var(--space-xs) var(--space-sm);
}
.skip:not(:focus) { inset-block-start: calc(-1 * var(--space-4xl)); }

.workbench {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--gap-columns);
  padding-block: var(--space-2xl);
}

.search-panel {
  padding-block-start: var(--space-xl);
}

h1 {
  line-height: 1.1;
  letter-spacing: -.04em;
  text-wrap: wrap;
}
.lead {
  max-width: 30ch;
  margin-block-start: var(--space-lg);
  color: var(--color-ink-2);
}

.search {
  margin-block-start: var(--space-xl);
  max-width: 28rem;
}
.search label {
  display: block;
  font-size: var(--text-sm);
  margin-block-end: var(--space-2xs);
}
.search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) fit-content(50%);
  gap: var(--space-xs);
}
.search input, .search-controls button {
  min-height: 48px;
  border-radius: var(--radius-pill);
}
.search input {
  min-width: 0;
  border: var(--rule-hair) solid var(--color-muted);
  background: var(--color-sheet);
  color: var(--color-ink);
  padding-inline: var(--space-sm);
}
.search input::placeholder { color: var(--color-muted); opacity: 1; }
.search input:focus-visible { outline-offset: -3px; }
.search-controls button {
  min-width: 0;
  padding-block: var(--space-xs);
  padding-inline: var(--space-lg);
  border: var(--rule-hair) solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font: 600 var(--text-sm)/1.25 var(--font-display);
  overflow-wrap: anywhere;
  cursor: pointer;
}
.search-controls button:active {
  background: var(--color-accent-2);
  border-color: var(--color-accent-2);
  color: var(--color-accent-ink);
}
.search-controls button:disabled { opacity: .55; cursor: not-allowed; }
.clear-search {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-xs);
  border: 0;
  background: none;
  color: var(--color-ink);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: .16em;
  cursor: pointer;
}

.register {
  min-width: 0;
  background: var(--color-sheet);
  border-block-start: var(--rule-bar) solid var(--color-ink);
  padding-inline: var(--space-lg);
}
.register-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-lg) var(--space-md);
}
.register-head h2 { font-size: var(--text-2xl); }
.filter-controls, .sort-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  font-size: var(--text-sm);
}
.filter-controls { margin-block-start: var(--space-sm); }
.filter-controls details { min-inline-size: 0; }
.filter-controls details[open] { flex-basis: 100%; }
.filter-controls summary, .sort-controls a {
  min-block-size: 44px;
  padding: var(--space-xs);
  border: var(--rule-hair) solid var(--color-muted);
  border-radius: var(--radius-pill);
  background: var(--color-sheet);
}
.filter-controls summary { cursor: pointer; align-content: center; }
.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block: var(--space-xs);
}
.sort-controls { margin-block-end: var(--space-sm); }
.sort-controls a { display: inline-flex; align-items: center; }
.sort-controls a[aria-current="true"] { border-color: var(--color-accent); font-weight: 600; }
.active-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-sm);
  margin-block-end: var(--space-xs);
  font-size: var(--text-sm);
}
.active-filter a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}
.result-count, .source, .kind, .colophon {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.resource-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.resource-row { border-block-start: var(--rule-hair) solid var(--color-rule); }
.resource-record {
  padding-block: var(--space-md) var(--space-xs);
  overflow-wrap: anywhere;
}
.record-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
}
.record-heading h3 {
  font-size: var(--text-lg);
  text-wrap: pretty;
}
.record { text-underline-offset: .18em; }
.record-meta, .record-tags, .harness-tags, .category-tags, .record-actions {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.record-meta { column-gap: var(--space-sm); line-height: 1.4; }
.kind { font: 600 var(--text-xs)/1.4 var(--font-display); }
.description { color: var(--color-ink-2); line-height: 1.4; }
.member-match {
  color: var(--color-accent-2);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.record-tags {
  align-items: start;
  gap: var(--space-2xs) var(--space-sm);
}
.harness-tags, .category-tags { gap: var(--space-2xs); }
.harness-tag, .category-tag { max-inline-size: 100%; }
.category-tag {
  background-color: var(--color-category-bg);
  color: var(--color-category-text);
}
.record-tags a, .filter-options a { min-block-size: 24px; }
.record-tags a[aria-current="true"], .filter-options a[aria-current="true"] {
  border-color: var(--color-accent);
  text-decoration-thickness: 2px;
}
.harness-tag { border-style: solid; }
.harness-tag img { flex: none; inline-size: 1em; block-size: 1em; }

.vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: var(--space-xs);
  min-height: 44px;
  padding-inline: var(--space-sm);
  border: var(--rule-hair) solid var(--color-muted);
  border-radius: var(--radius-pill);
  background: var(--color-sheet);
  color: var(--color-ink);
  font: 500 var(--text-xs)/1.25 var(--font-display);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vote-count { font-family: var(--font-outlier); }
.vote-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.vote[aria-pressed="true"] {
  border-color: var(--color-accent-2);
  background: var(--color-accent-2);
  color: var(--color-accent-ink);
}
.vote[aria-pressed="true"] .vote-icon { fill: currentColor; }
.record-actions { gap: 0 var(--space-md); }
.record-actions details { min-inline-size: 0; }
.record-actions details[open] { flex-basis: 100%; }

.collection-members summary, .install-prompt summary {
  min-height: 44px;
  padding-block: var(--space-sm);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: .16em;
  cursor: pointer;
}
.collection-members ul {
  margin: 0;
  padding-inline-start: var(--space-md);
}
.collection-members li {
  padding-block: var(--space-xs);
  line-height: 1.4;
}
.collection-members li + li {
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.collection-members li p { margin-block-start: var(--space-2xs); }
.prompt-content textarea {
  display: block;
  inline-size: 100%;
  min-block-size: var(--space-3xl);
  field-sizing: fixed;
  padding: var(--space-xs);
  border: var(--rule-hair) solid var(--color-muted);
  background: var(--color-sheet);
  color: var(--color-ink);
  font-size: var(--text-md);
  resize: vertical;
}
.copy-prompt {
  min-height: 44px;
  margin-block-start: var(--space-xs);
  padding-inline: var(--space-xs);
  border: var(--rule-hair) solid var(--color-muted);
  border-radius: var(--radius-pill);
  background: var(--color-sheet);
  color: var(--color-ink);
  font-size: var(--text-sm);
  cursor: pointer;
}
.copy-status {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (hover: hover) {
  a:hover, .clear-search:hover, .collection-members summary:hover, .install-prompt summary:hover {
    text-decoration-thickness: 2px;
  }
  .search input:hover { background: var(--color-accent-ink); }
  .search-controls button:hover {
    background: var(--color-accent-2);
    border-color: var(--color-accent-2);
  }
  .vote:hover, .copy-prompt:hover { border-color: var(--color-accent); }
}

@media (prefers-reduced-motion: no-preference) {
  .vote { transition: scale 150ms ease-out; }
  .vote:enabled:active { scale: .96; }
}
.empty { padding-block: var(--space-lg); overflow-wrap: anywhere; }

.colophon {
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.colophon a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (max-width: 70rem) {
  :root { --text-display: 3.65rem; }
}
@media (max-width: 54rem) {
  :root { --text-display: 3.25rem; --gutter: var(--space-lg); }
  html { scroll-padding-block-start: var(--space-md); }
  .workbench { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); }
  .search-panel { padding-block-start: 0; }
  .search { margin-block-start: var(--space-lg); }
}
@media (max-width: 28rem) {
  :root { --text-display: 2.8rem; --gutter: var(--space-md); }
  nav { gap: var(--space-sm); }
  .register { padding-inline: var(--space-sm); }
  .record-heading h3 { font-size: var(--text-md); }
  .record-meta { column-gap: var(--space-xs); }
  .vote {
    min-inline-size: 44px;
    gap: var(--space-2xs);
    padding-inline: var(--space-2xs);
  }
  .vote-label { display: none; }
  .colophon .container {
    align-items: start;
    flex-direction: column;
    gap: 0;
    padding-block-start: var(--space-md);
  }
}


/* Worker-rendered controls use real forms and links. */
.vote-form { margin: 0; }
.vote-link { text-decoration: none; }
.masthead .inline button { min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: var(--text-sm); text-decoration: underline; text-decoration-color: var(--color-accent); }
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-block: var(--space-lg); }
.pagination a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); border: var(--rule-hair) solid var(--color-muted); color: var(--color-ink); text-decoration: none; }
.pagination a:hover { border-color: var(--color-accent); }