:root {
  color-scheme: dark;
  --clarity-night: #050a10;
  --clarity-panel: #0a131c;
  --clarity-cyan: #63d8ef;
  --clarity-gold: #d9b75f;
  --clarity-ink: #edf4f6;
  --clarity-muted: #aab9c0;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--clarity-night); }

body[data-clarity-channel="public-web"] {
  min-height: 100vh;
  margin: 0;
  color: var(--clarity-ink);
  background:
    radial-gradient(ellipse at 50% 0, rgb(31 115 144 / .2), transparent 42rem),
    radial-gradient(ellipse at 85% 20%, rgb(160 119 35 / .1), transparent 30rem),
    var(--clarity-night);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

a { color: #8be7ff; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.clarity-directory__skip {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  padding: 0.7rem 1rem;
  transform: translateY(-160%);
  color: #031016;
  background: #9cecff;
}
.clarity-directory__skip:focus { transform: translateY(0); }

.clarity-directory__masthead,
.clarity-directory__footer {
  display: flex;
  width: min(76rem, calc(100% - 2rem));
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-inline: auto;
}
.clarity-directory__masthead { min-height: 5.5rem; border-bottom: 1px solid rgb(120 186 206 / .2); }
.clarity-directory__brand { display: inline-flex; align-items: center; gap: 0.9rem; color: inherit; text-decoration: none; }
.clarity-directory__brand img { display: block; width: min(12rem, 38vw); max-height: 2.1rem; object-fit: contain; object-position: left center; }
.clarity-directory__brand span,.clarity-directory__eyebrow { color: var(--clarity-cyan); font: 700 0.67rem/1.4 ui-monospace, monospace; letter-spacing: .17em; }
.clarity-directory__catalog-link { font-size: .85rem; }

.clarity-directory__hero { width: min(58rem, calc(100% - 2rem)); margin: clamp(3.5rem, 10vh, 7rem) auto 0; text-align: center; }
.clarity-directory__eyebrow { margin: 0 0 .8rem; text-transform: uppercase; }
.clarity-directory__hero h1 { margin: 0; color: var(--clarity-ink); font: 400 clamp(2.4rem, 7vw, 5.4rem)/1.04 Georgia, serif; letter-spacing: -.025em; }
.clarity-directory__intro { max-width: 46rem; margin: 1.25rem auto 2rem; color: var(--clarity-muted); font-size: clamp(1rem, 2.5vw, 1.22rem); line-height: 1.7; }
.clarity-directory__search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; max-width: 52rem; margin: 0 auto; padding: .55rem; border: 1px solid rgb(99 216 239 / .55); border-radius: 999px; background: rgb(10 19 28 / .96); box-shadow: 0 0 2.5rem rgb(35 153 183 / .13); }
.clarity-directory__search input { min-width: 0; min-height: 3.4rem; padding: .6rem 1.1rem; border: 0; border-radius: 999px; color: var(--clarity-ink); background: transparent; font: inherit; }
.clarity-directory__search input:focus-visible { outline-offset: -3px; }
.clarity-directory__search button { min-width: 7.5rem; min-height: 3.4rem; padding: .6rem 1.2rem; border: 1px solid var(--clarity-gold); border-radius: 999px; color: #080b0e; background: linear-gradient(135deg, #f0d888, #bb9136); font: inherit; font-size: .82rem; font-weight: 800; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.clarity-directory__search :disabled { opacity: .55; cursor: not-allowed; }
.clarity-directory__privacy { max-width: 68ch; margin: 1rem auto 0; color: #9aabb3; font: .76rem/1.7 ui-monospace, monospace; }

.clarity-directory__results,.clarity-directory__catalog { width: min(62rem, calc(100% - 2rem)); margin: clamp(4rem, 9vw, 7rem) auto; }
.clarity-directory__results h2,.clarity-directory__catalog h2 { margin: 0 0 1.1rem; color: var(--clarity-ink); font: 400 clamp(1.8rem, 4vw, 2.65rem)/1.15 Georgia, serif; }
.clarity-directory__results [data-status] { padding: 1rem 0; color: var(--clarity-muted); }
.clarity-directory__results [data-sources] { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
.clarity-directory__results .source-pill { padding: .35rem .55rem; border: 1px solid rgb(99 216 239 / .25); border-radius: 999px; color: #c2d2d9; font: .68rem/1.3 ui-monospace, monospace; }
.clarity-directory__results [data-results] { display: grid; gap: .85rem; }
.clarity-directory__results .result { padding: 1.25rem; border: 1px solid rgb(120 186 206 / .2); border-radius: .8rem; background: linear-gradient(135deg, rgb(10 19 28 / .96), rgb(7 13 20 / .96)); overflow-wrap: anywhere; }
.clarity-directory__results .result h2 { margin: .5rem 0; font-size: 1.35rem; }
.clarity-directory__results .result__origin,.clarity-directory__results .result__meta,.clarity-directory__results .result__inspection,.clarity-directory__results .result__limitation { color: var(--clarity-muted); font-size: .78rem; line-height: 1.6; }
.clarity-directory__results .result__origin { color: var(--clarity-cyan); }
.clarity-directory__results .clarity__empty { padding: 1rem; border-left: 2px solid var(--clarity-gold); color: var(--clarity-muted); }

.clarity-directory__catalog { padding: clamp(1.25rem, 4vw, 2.25rem); border: 1px solid rgb(217 183 95 / .28); border-radius: 1rem; background: linear-gradient(135deg, rgb(10 19 28 / .96), rgb(7 13 20 / .9)); }
.clarity-directory__catalog > p:not(.clarity-directory__eyebrow) { max-width: 76ch; color: var(--clarity-muted); line-height: 1.7; }
.clarity-directory__release-list { display: grid; gap: .6rem; padding-left: 1.2rem; color: var(--clarity-ink); overflow-wrap: anywhere; }
.clarity-directory__release-list li { padding: .55rem 0; }
.clarity-directory__release-list code { color: #d9c78d; font-size: .82rem; }
.clarity-directory__small { font-size: .78rem; }
.clarity-directory__footer { min-height: 5rem; border-top: 1px solid rgb(120 186 206 / .2); color: #aab9c0; font: .72rem/1.5 ui-monospace, monospace; }
.clarity-directory__footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 600px) {
  .clarity-directory__masthead { min-height: 4.4rem; }
  .clarity-directory__brand { gap: .5rem; }
  .clarity-directory__brand span { max-width: 6rem; font-size: .55rem; }
  .clarity-directory__catalog-link { max-width: 7.5rem; font-size: .72rem; text-align: right; }
  .clarity-directory__search { grid-template-columns: 1fr; border-radius: 1.25rem; }
  .clarity-directory__search input,.clarity-directory__search button { width: 100%; }
  .clarity-directory__footer { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 1rem; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; } }