:root {
  color-scheme: light;
  --clear-titlebar-height: 40px;
  --page: #f4f1e9;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-solid: #fffdf8;
  --ink: #263138;
  --muted: #68747b;
  --faint: #8a9498;
  --line: rgba(73, 85, 91, 0.18);
  --gold: #9a6c27;
  --cyan: #147d8c;
  --link: #165fba;
  --shadow: rgba(60, 46, 23, 0.12);
  --clear-titlebar-bg: rgba(7, 16, 24, 0.94);
  --clear-titlebar-ink: #e2d2b2;
  --clear-titlebar-rule: rgba(216, 181, 106, 0.3);
  --clear-titlebar-shadow: rgba(0, 0, 0, 0.34);
  --clr-tb-icon-shadow: rgba(0, 0, 0, 0.92);
  --clear-address-bg: #0a151e;
  --clear-address-ink: #edf6f7;
  --clear-address-rule: rgba(216, 181, 106, 0.34);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--page);
}

body[data-theme="dark"] {
  color-scheme: dark;
  --page: #071018;
  --surface: rgba(10, 20, 29, 0.9);
  --surface-solid: #0a151e;
  --ink: #e1eaed;
  --muted: #a5b5bb;
  --faint: #819199;
  --line: rgba(121, 198, 211, 0.18);
  --gold: #d4aa58;
  --cyan: #69d9e5;
  --link: #83baff;
  --shadow: rgba(0, 0, 0, 0.36);
  --clear-titlebar-bg: rgba(3, 9, 15, 0.94);
  --clear-titlebar-ink: #d8ccb4;
  --clear-titlebar-rule: rgba(94, 217, 255, 0.19);
  --clear-titlebar-shadow: rgba(0, 0, 0, 0.42);
  --clr-tb-icon-shadow: rgba(0, 0, 0, 0.9);
  --clear-address-bg: #030a11;
  --clear-address-ink: #eaf6f8;
  --clear-address-rule: rgba(94, 217, 255, 0.3);
}

a { color: inherit; }

.clarity-toolbar {
  position: sticky;
  top: var(--clear-titlebar-height);
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(280px, 680px) auto;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 48px);
  min-height: 76px;
  padding: 12px clamp(18px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 6px 22px var(--shadow);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}

.clarity-toolbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.clarity-toolbar__brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px var(--shadow));
}

.clarity-toolbar__brand span { display: grid; gap: 2px; }
.clarity-toolbar__brand strong { color: var(--gold); font: 680 14px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.13em; }
.clarity-toolbar__brand small { color: var(--muted); font-size: 10px; letter-spacing: 0.05em; }
.clarity-toolbar__return { color: var(--cyan); font: 650 10px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.11em; text-decoration: none; text-transform: uppercase; }

.clarity__search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, transparent);
  border-radius: 23px;
  background: var(--surface-solid);
  box-shadow: 0 8px 24px var(--shadow);
}

.clarity__search input {
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 19px;
  color: var(--ink);
  background: transparent;
  font-size: 15px;
}

.clarity__search button {
  min-width: 84px;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--gold);
  background: transparent;
  cursor: pointer;
  font: 700 10px/1 ui-monospace, Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.clarity__search button:hover,
.clarity__search button:focus-visible { background: color-mix(in srgb, var(--gold) 8%, transparent); outline: 0; }

.clarity {
  width: min(900px, calc(100% - 36px));
  margin: 0 auto;
  padding: 42px 0 72px;
}

.clarity__head { margin-bottom: 22px; }
.clarity__eyebrow { margin: 0 0 8px; color: var(--gold); font: 650 10px/1.4 ui-monospace, Consolas, monospace; letter-spacing: 0.18em; }
.clarity__wordmark-heading { margin: 0; line-height: 0; }
.clarity__wordmark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 988 / 241;
  object-fit: contain;
  object-position: left center;
}
.clarity__wordmark--dark,
body[data-theme="dark"] .clarity__wordmark--light { display: none; }
body[data-theme="dark"] .clarity__wordmark--dark { display: block; }
.clarity__ethos { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.clarity__ethos span { color: var(--cyan); }
.clarity__status { margin: 20px 0 12px; color: var(--muted); font: 600 11px/1.5 ui-monospace, Consolas, monospace; letter-spacing: 0.06em; }
.clarity__sources { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
.source-pill { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--faint); font: 600 9px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0.05em; }
.source-pill[data-state="retrieved"] { border-color: color-mix(in srgb, var(--cyan) 42%, transparent); color: var(--cyan); }

.clarity__results { display: grid; gap: 28px; }
.result { padding: 0 6px; }
.result__origin { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.result__origin-mark { display: grid; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; place-items: center; color: var(--gold); background: var(--surface-solid); font: 700 11px/1 Georgia, serif; box-shadow: 0 2px 8px var(--shadow); }
.result__origin span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; color: var(--faint); font: 650 9px/1.4 ui-monospace, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.result__state { color: var(--gold); }
.result h2 { margin: 0 0 6px; font-size: 20px; font-weight: 520; line-height: 1.3; }
.result h2 a { color: var(--link); text-decoration: none; }
.result h2 a:hover { text-decoration: underline; }
.result p { margin: 4px 0; color: var(--muted); font-size: 14px; line-height: 1.52; }
.result__authors { color: var(--ink) !important; font-size: 12px !important; }
.clarity__notice { margin-top: 40px; padding: 16px 18px; border-left: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 6%, transparent); color: var(--muted); font-size: 12px; line-height: 1.55; }
.clarity__empty { padding: 34px; border: 1px solid var(--line); color: var(--muted); text-align: center; }

@media (max-width: 760px) {
  .clarity-toolbar { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 10px 12px; }
  .clarity-toolbar__brand small, .clarity-toolbar__return { display: none; }
  .clarity-toolbar__brand strong { font-size: 11px; }
  .clarity-toolbar__brand img { width: 28px; height: 28px; }
  .clarity__search button { min-width: 64px; }
  .clarity { width: min(100% - 24px, 900px); padding-top: 30px; }
}

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