:root {
  color-scheme: light;
  --ink: #161b33;
  --muted: #515970;
  --blue: #142cd3;
  --blue-dark: #0e21a7;
  --lime: #e5ff70;
  --surface: #f5f6fb;
  --line: #dce0ee;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--surface);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid #4358ee; outline-offset: 4px; }
[hidden] { display: none !important; }
.visually-hidden, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: absolute; left: 12px; top: 12px; padding: 12px; background: #fff; z-index: 2; }
.wrap { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }
.top { background: #fff; }
.header-row { height: 69px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 4px; font-weight: 850; font-size: 18px; letter-spacing: -.06em; white-space: nowrap; }
.brand-icon { display: grid; place-items: center; background: var(--blue); color: var(--lime); border-radius: 9px; width: 34px; height: 34px; margin-right: 6px; }
.brand-icon svg { width: 23px; height: 23px; }
.brand-name { white-space: nowrap; }
.brand-tail { color: var(--blue); }
nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 650; }
nav a { display: flex; gap: 6px; align-items: center; }
nav a:hover { color: var(--blue); }
nav a:last-child { padding: 9px 13px; border: 1px solid var(--line); border-radius: 8px; }
.hero { overflow: hidden; background: linear-gradient(115deg, #142cd3, #1e36d8 73%, #223adc); color: #fff; }
.hero-inner { position: relative; min-height: 428px; display: flex; align-items: center; padding-block: 47px 86px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow, .section-index, .tool-type { font-family: ui-monospace, "Consolas", monospace; letter-spacing: .095em; font-weight: 750; font-size: 12px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--lime); margin: 0 0 18px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px #e5ff7060; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.25rem, 6vw, 5.45rem); letter-spacing: -.078em; line-height: .99; margin-bottom: 18px; font-weight: 830; }
h1 em { color: var(--lime); font-style: normal; }
.hero-text { max-width: 465px; color: #e1e6ff; font-size: 16px; line-height: 1.6; margin-bottom: 21px; }
.hero-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 720; color: var(--lime); }
.hero-link:hover { text-decoration: underline; }
.hero-link:focus-visible { outline-color: var(--lime); }
.hero-art { position: absolute; width: min(50%, 540px); right: -10px; top: 50%; transform: translateY(-55%); pointer-events: none; }
.board { width: 100%; height: auto; stroke: none; stroke-width: 1; overflow: visible; }
.research { position: relative; margin-top: -45px; scroll-margin-top: 22px; }
.research-panel { padding: 24px 28px 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 28px #1627620b; }
.research-head, .catalog-head, .filter-row, .tool-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.section-index { color: var(--blue); display: block; margin-bottom: 7px; }
.research h2 { font-size: clamp(1.35rem, 3.3vw, 1.95rem); letter-spacing: -.046em; line-height: 1.12; margin-bottom: 0; }
.providers { flex-shrink: 0; display: flex; padding: 4px; border-radius: 10px; background: #f0f2fa; gap: 3px; }
.providers button { border: 1px solid transparent; border-radius: 7px; padding: 6px 10px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.providers button[aria-pressed="true"] { color: var(--blue); background: #fff; border-color: #dce1f5; box-shadow: 0 1px 3px #1d28620e; }
.search-box { margin-top: 16px; min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 5px 5px 5px 15px; background: #f8f9fd; border: 1px solid #d8def0; border-radius: 10px; }
.search-box:focus-within, .filter-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px #142cd321; }
.search-box > svg, .filter-search > svg { color: #626c88; width: 20px; height: 20px; }
.search-box input, .filter-search input { background: transparent; border: 0; flex: 1; min-width: 0; outline: none; color: var(--ink); }
input::placeholder { color: #646d88; opacity: 1; }
.search-box button { display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: var(--blue); color: #fff; padding: 10px 14px; font-size: 14px; font-weight: 700; border-radius: 7px; }
.search-box button:hover { background: var(--blue-dark); }
.examples { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.examples span { margin-right: 3px; }
.examples button { padding: 4px 8px; border: 1px solid var(--line); background: #fff; color: #414c70; border-radius: 5px; }
.examples button:hover { border-color: #7e8cf6; color: var(--blue); }
.catalog { padding-block: 46px 64px; scroll-margin-top: 0; }
.catalog-head { align-items: end; margin-bottom: 20px; }
.catalog h2 { font-size: clamp(2rem, 4vw, 2.85rem); letter-spacing: -.065em; line-height: 1; margin-bottom: 9px; }
.catalog-head p { color: var(--muted); font-size: 15px; line-height: 1.5; margin-bottom: 0; }
.filter-search { display: flex; align-items: center; min-height: 40px; padding: 7px 10px; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 8px; width: 211px; flex-shrink: 0; }
.filter-search input { font-size: 14px; width: 100%; }
.filter-search > svg { width: 17px; height: 17px; }
.filter-row { margin-bottom: 16px; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filters button { padding: 7px 11px; background: #fff; color: #424d6c; font-size: 13px; font-weight: 670; border: 1px solid var(--line); border-radius: 7px; }
.filters button:hover { border-color: #7e8cf6; }
.filters button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
#result-count { color: var(--muted); white-space: nowrap; font-size: 13px; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool { display: flex; flex-direction: column; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-width: 0; }
.tool:hover { border-color: #a9b3ed; }
.tool-top { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.tool-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; }
.tool-icon svg { width: 22px; height: 22px; }
.blue { background: #e8edff; color: #233bd8; }
.mint { background: #dcf5ec; color: #12694f; }
.lilac { background: #eee7ff; color: #5e39a3; }
.peach { background: #ffecdf; color: #94491f; }
.lemon { background: #f2f8cc; color: #536410; }
.rose { background: #fae6f0; color: #993b67; }
.tool-type { color: #555e7a; font-size: 10px; }
.tool h3 { font-size: 21px; letter-spacing: -.038em; margin-bottom: 6px; line-height: 1.18; }
.tool p { color: var(--muted); font-size: 14px; line-height: 1.48; margin-bottom: 15px; }
.tool-bottom { padding-top: 11px; border-top: 1px solid #e7e9f3; margin-top: auto; gap: 8px; }
.tool-bottom span { font-size: 12px; color: var(--muted); }
.tool-bottom a, .empty button { color: var(--blue); font-weight: 730; font-size: 13px; }
.tool-bottom a { display: flex; align-items: center; gap: 5px; padding: 5px 0 5px 3px; }
.tool-bottom a:hover { text-decoration: underline; }
.empty { border: 1px dashed #b7c0dc; background: #fff; padding: 26px; border-radius: 12px; }
.empty p { margin-bottom: 9px; }
.empty button { border: 0; background: #eef1ff; padding: 8px 11px; border-radius: 7px; }
.foot { background: #fff; border-top: 1px solid var(--line); }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.foot-row > span { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) {
  .wrap { width: calc(100% - 56px); }
  .hero-art { right: -26px; }
  .hero-inner { min-height: 398px; }
  .hero-text { max-width: 380px; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 32px); }
  .header-row { height: 60px; gap: 10px; }
  .brand { font-size: 16px; }
  .brand-icon { width: 28px; height: 28px; margin-right: 3px; }
  .brand-icon svg { width: 19px; height: 19px; }
  nav { gap: 11px; font-size: 12px; }
  nav a:last-child { padding: 5px 7px; }
  nav a svg { display: none; }
  .hero-inner { min-height: 375px; padding-block: 42px 74px; }
  .hero-art { width: 300px; right: -113px; top: 54%; opacity: .33; }
  h1 { font-size: clamp(3rem, 11vw, 4rem); }
  .hero-text { max-width: 310px; font-size: 15px; }
  .research { margin-top: -38px; }
  .research-panel { padding: 17px 13px; }
  .research-head, .catalog-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .search-box { gap: 6px; padding-left: 8px; margin-top: 11px; }
  .search-box input { font-size: 16px; }
  .search-box button { padding: 9px 7px; font-size: 12px; }
  .search-box button svg { display: none; }
  .search-box > svg { width: 17px; height: 17px; }
  .catalog { padding-block: 35px 40px; }
  .catalog-head { margin-bottom: 14px; }
  .filter-search { width: 100%; }
  .filter-search input { font-size: 16px; }
  .filter-row { gap: 7px; align-items: start; }
  #result-count { padding-top: 7px; }
  .tool-grid { grid-template-columns: 1fr; }
  .foot-row { flex-wrap: wrap; padding-block: 15px; gap: 10px; }
}
@media (max-width: 380px) {
  .brand-name { white-space: normal; line-height: 1.05; }
  .brand-tail { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}