@font-face {
  font-family: Inter;
  src: url("/vendor/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Space;
  src: url("/vendor/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #090b12;
  --line: #252835;
  --text: #eff0f7;
  --muted: #9497ad;
  --accent: #a696ff;
  --mint: #8ed7bd;
  --sidebar: 218px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
}
.sidebar .close-navigation {
  display: none;
  position: absolute;
  top: 7px;
  right: 7px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  color: inherit;
  border: 0;
  background: none;
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
::selection {
  background: #7861b9;
  color: white;
}
svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.65;
  vertical-align: middle;
  flex-shrink: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
input,
select,
textarea {
  min-width: 0;
  color: var(--text);
  background: #10121b;
  border: 1px solid var(--line);
  border-radius: 7px;
}
input::placeholder,
textarea::placeholder {
  color: #777d94;
}
input[type="checkbox"] {
  accent-color: #a696ff;
  width: 14px;
  height: 14px;
  cursor: pointer;
}
input[type="number"] {
  width: 100%;
  padding: 8px;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 100;
  background: var(--accent);
  color: #111;
  padding: 12px;
}
.skip-link:focus {
  top: 12px;
}
#space-bg {
  position: absolute;
  top: 64px;
  left: var(--sidebar);
  width: calc(100% - var(--sidebar));
  height: 480px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar);
  z-index: 30;
  background: #0c0e16;
  border-right: 1px solid #20232f;
  padding: 28px 17px 0;
  display: flex;
  flex-direction: column;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: Space, sans-serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.8px;
  padding: 0 9px;
}
.brand-mark {
  height: 38px;
  width: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, #8a78e1, #564c92);
  color: #f1eaff;
  box-shadow: 0 0 35px #8471d521;
}
.brand-mark svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.35;
}
.brand-sub {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 8px;
  letter-spacing: 4.6px;
  font-weight: 500;
  color: #9b95b3;
  margin-top: -2px;
}
.workspace-label {
  font-size: 9px;
  letter-spacing: 1.7px;
  color: #70758d;
  font-weight: 600;
  margin: 43px 12px 13px;
}
.main-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.main-nav > a,
.main-nav > button {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  text-align: left;
  font-size: 12px;
  color: #a4a7ba;
  border: 1px solid transparent;
  border-radius: 7px;
  white-space: nowrap;
}
.main-nav > a:hover,
.main-nav > button:hover {
  color: #eae6ff;
  background: #171823;
}
.main-nav > a.active {
  color: #c0b4ff;
  background: #a696ff12;
  border-color: #9c89ff25;
}
.main-nav svg {
  width: 17px;
  height: 17px;
}
.nav-dot {
  display: none;
  width: 5px;
  height: 5px;
  background: #b6a8ff;
  border-radius: 50%;
  margin-left: auto;
}
.active .nav-dot {
  display: block;
}
.nav-count {
  font-size: 10px;
  margin-left: auto;
  color: #9495aa;
  background: #ffffff06;
  min-width: 20px;
  text-align: center;
  border-radius: 4px;
}
.new-label {
  font-size: 7px;
  background: #b3a0ff18;
  color: #b1a0eb;
  padding: 2px 4px;
  border-radius: 3px;
  margin-left: auto;
  letter-spacing: 0.6px;
}
.tools-label {
  margin-top: 31px;
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 32px;
}
.local-card {
  padding: 14px 12px;
  border: 1px solid #302b45;
  border-radius: 9px;
  background: linear-gradient(115deg, #1a1729, #11131d);
}
.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #87cdb3;
  box-shadow: 0 0 8px #85d1b32b;
  flex-shrink: 0;
}
.local-card .status-dot {
  margin-right: 6px;
}
.local-card strong {
  font-weight: 500;
  font-size: 10px;
  color: #d1cae5;
}
.local-card p {
  font-size: 10px;
  line-height: 1.7;
  color: #8d89a2;
  margin: 7px 0 11px;
}
.local-card button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  color: #b6a8ed;
  font-size: 10px;
  width: 100%;
}
.local-card button svg {
  height: 13px;
}
.source-label {
  font-size: 8px;
  letter-spacing: 1.4px;
  color: #686e83;
  margin: 25px 9px 9px;
}
.source-link {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 6px 9px;
  color: #9599b1;
}
.source-link svg {
  width: 12px;
  height: 12px;
  color: #666a7e;
}
.sidebar-footer {
  border-top: 1px solid var(--line);
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 22px;
  padding: 18px 9px;
  font-size: 8px;
  color: #7c8299;
  line-height: 1.7;
}
.nasa-word {
  font-family: Space, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 18px;
  letter-spacing: -1px;
  color: #b0b3c6;
}
.app-shell {
  margin-left: var(--sidebar);
  position: relative;
}
.topbar {
  height: 69px;
  border-bottom: 1px solid #212430;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  background: #0b0d14e8;
  position: relative;
  z-index: 15;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #7a8097;
  font-size: 11px;
}
.breadcrumb svg {
  width: 12px;
  height: 12px;
  color: #50566a;
}
.breadcrumb strong {
  color: #d6d5e2;
  font-weight: 400;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.model-badge {
  border: 1px solid #30323d;
  border-radius: 6px;
  font-size: 9px;
  color: #a0a8b8;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: #8f95ae;
}
.icon-button:hover {
  background: #20232e;
  color: #ddd;
}
.icon-button svg {
  width: 16px;
  height: 16px;
}
.avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #292539;
  border: 1px solid #524265;
  color: #c4b6d9;
  font-size: 10px;
}
.mobile-menu {
  display: none;
}
main {
  padding: 0 36px;
  max-width: 1620px;
  margin: auto;
  position: relative;
}
.hero {
  height: 379px;
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 60%;
  padding-bottom: 2px;
}
.eyebrow {
  font-size: 8px;
  letter-spacing: 2px;
  color: #a0a6be;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 21px;
}
.eyebrow > span {
  width: 5px;
  height: 5px;
  background: var(--mint);
  border-radius: 50%;
}
h1 {
  font-family: Space, Inter, sans-serif;
  font-size: clamp(35px, 3.6vw, 58px);
  line-height: 1.12;
  letter-spacing: -2px;
  font-weight: 500;
}
h1 span {
  color: #baa9f7;
}
.hero p {
  color: #9399b0;
  font-size: 11px;
  line-height: 1.8;
  margin-top: 18px;
}
.hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 15px;
  font-size: 10px;
  font-weight: 500;
  background: #151721;
  line-height: 1.4;
}
.button svg {
  width: 14px;
  height: 14px;
}
.button:hover {
  background: #202231;
  border-color: #4d475f;
}
.button.primary {
  background: #ac9aee;
  color: #171023;
  border-color: #ac9aee;
  box-shadow: 0 3px 25px #9e86ed0d;
}
.button.primary:hover {
  background: #c1b0ff;
}
.button.ghost {
  background: #0d101b99;
  color: #c4c5d5;
  border-color: #333240;
}
.hero-note {
  font-size: 6.5px;
  letter-spacing: 1.5px;
  color: #606c84;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 27px;
}
.tiny-line {
  height: 1px;
  width: 22px;
  background: #53566f;
}
.planet-stage {
  position: absolute;
  right: -3%;
  top: 0;
  width: 57%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.planet-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.planet-stage.fallback::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: url("/assets/earth_atmos_2048.jpg") center / cover;
  box-shadow:
    inset -50px -5px 70px #000c,
    0 0 24px #6e95d52b;
}
.planet-caption {
  position: absolute;
  right: 9%;
  bottom: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8b97ae;
  font-size: 6px;
  letter-spacing: 1.8px;
}
.planet-caption .status-dot {
  width: 3px;
  height: 3px;
}
.caption-divider {
  height: 9px;
  width: 1px;
  background: #4a5669;
  margin: 0 4px;
}
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid #242732;
  padding: 20px 0;
  margin-bottom: 29px;
  background: #0b0d14a0;
}
.stats-strip > div {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-left: 25px;
  border-right: 1px solid #242732;
}
.stats-strip > div:first-child {
  padding-left: 0;
}
.stats-strip > div:last-child {
  border: 0;
}
.stat-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 9px;
  background: #a696ff0a;
  color: #a698d5;
  border: 1px solid #a696ff19;
}
.stat-icon svg {
  width: 17px;
  height: 17px;
}
.stat-icon.mint {
  color: #7bb99f;
  background: #7bb99f08;
  border-color: #7bb99f15;
}
.stat-icon.peach {
  color: #c9a58b;
  background: #c9a58b08;
  border-color: #c9a58b15;
}
.stat-icon.blue {
  color: #8aa7c9;
  background: #8aa7c908;
  border-color: #8aa7c915;
}
.stats-strip strong {
  font-family: Space, sans-serif;
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.5px;
  display: block;
  line-height: 1.3;
}
.stats-strip div div > span {
  font-size: 8px;
  color: #8c92a8;
  display: block;
  margin-top: 3px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.section-heading h2 {
  font-family: Space, sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.section-heading h2 span {
  font-family: Inter, sans-serif;
  font-size: 9px;
  letter-spacing: 0;
  color: #8b839d;
  background: #191722;
  border: 1px solid #2c283a;
  border-radius: 5px;
  padding: 3px 6px;
  margin-left: 9px;
  vertical-align: middle;
}
.section-heading p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 7px;
}
.small-action {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9d9fb4;
  font-size: 10px;
  padding: 7px 0;
}
.small-action svg {
  height: 13px;
  width: 13px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 9px 8px 17px;
  background: #13151f;
  border: 1px solid #363144;
  border-radius: 8px;
  box-shadow: 0 0 0 3px #a696ff03;
}
.search-box > svg {
  width: 18px;
  height: 18px;
  color: #77758f;
}
.search-box input {
  flex: 1;
  border: 0;
  background: none;
  padding: 8px 0;
  outline-offset: 2px;
  font-size: 11px;
  min-width: 0;
}
.search-box:focus-within {
  border-color: #8b79bb;
}
.search-box .button {
  padding: 9px 17px;
}
.search-shortcut {
  font-size: 8px;
  border: 1px solid #30303d;
  border-radius: 4px;
  color: #71758a;
  padding: 2px 6px;
  white-space: nowrap;
}
.suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 13px 0 24px;
  font-size: 9px;
  color: #646d84;
}
.suggestions > span {
  margin-right: 3px;
}
.suggestion {
  border: 1px solid #282b37;
  border-radius: 5px;
  font-size: 8px;
  padding: 4px 8px;
  color: #969bb0;
  background: #11131b;
  display: flex;
  align-items: center;
  gap: 5px;
}
.suggestion:hover {
  border-color: #796c9c;
  color: #c6b2ff;
}
.suggestion svg {
  width: 10px;
  height: 10px;
}
.library-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 19px;
}
.tabs {
  display: flex;
  gap: 22px;
  align-items: center;
}
.tab {
  color: #8e94aa;
  padding: 0 0 12px;
  border-bottom: 2px solid transparent;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tab.active {
  color: #c0b0f6;
  border-color: #b2a0eb;
}
.tab span {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #ffffff06;
  color: #8e94aa;
}
.sort-wrap {
  display: flex;
  gap: 7px;
  align-items: center;
  padding-bottom: 10px;
  color: #717a94;
  font-size: 9px;
}
.sort-wrap select {
  padding: 5px 20px 5px 8px;
  font-size: 9px;
  border-color: #252935;
  background: #10121a;
}
.view-toggle {
  display: flex;
  border: 1px solid #292c37;
  border-radius: 5px;
  padding: 2px;
  margin-left: 5px;
}
.view-toggle button {
  width: 25px;
  height: 22px;
  padding: 4px;
  color: #65718b;
  display: grid;
  place-items: center;
  border-radius: 3px;
}
.view-toggle button.active {
  background: #302b41;
  color: #bca9ec;
}
.view-toggle svg {
  height: 12px;
  width: 12px;
}
.research-layout {
  display: grid;
  grid-template-columns: 174px minmax(0, 1fr);
  gap: 23px;
}
.filter-panel {
  font-size: 9px;
}
.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.filter-header h3 {
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-header svg {
  width: 12px;
  height: 12px;
  color: #8b819f;
}
.filter-header button {
  color: #a18abb;
  font-size: 8px;
  padding: 4px;
}
.filter-section {
  border-bottom: 1px solid #212530;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.filter-section summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 500;
  color: #c6c6d4;
  margin-bottom: 12px;
}
.filter-section summary::-webkit-details-marker {
  display: none;
}
.filter-section summary::after {
  content: "−";
  font-size: 12px;
  color: #8c8ba1;
}
.filter-section:not([open]) summary::after {
  content: "+";
}
.facet-option {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  color: #9299af;
  font-size: 9px;
  cursor: pointer;
}
.facet-option input {
  margin: 0;
}
.facet-option span {
  overflow-wrap: anywhere;
}
.facet-option em {
  font-style: normal;
  font-size: 8px;
  color: #657087;
  margin-left: auto;
}
.more-filters {
  font-size: 8px;
  color: #ac99cb;
  padding: 3px 0;
}
.year-inputs {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #5a6279;
}
.year-inputs input {
  font-size: 9px;
  padding: 6px;
  width: calc(50% - 8px);
}
.filter-note {
  display: flex;
  gap: 7px;
  padding: 11px 10px;
  color: #757e97;
  border: 1px solid #252936;
  border-radius: 6px;
  font-size: 8px;
  line-height: 1.7;
  background: #0f111a;
}
.filter-note svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}
.results-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 9px;
  color: #777f97;
  margin-bottom: 13px;
  min-height: 21px;
}
.mode-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #91bcae;
  font-size: 8px;
}
.mode-chip svg {
  width: 11px;
  height: 11px;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.paper-card {
  border: 1px solid #282b38;
  border-radius: 9px;
  background: linear-gradient(115deg, #141722, #10131c);
  padding: 17px;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.18s,
    transform 0.18s;
  min-width: 0;
  position: relative;
}
.paper-card:hover {
  border-color: #524566;
  transform: translateY(-2px);
}
.card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 7px;
  color: #808ba4;
  margin-bottom: 12px;
}
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #9eabc5;
  font-size: 7px;
  letter-spacing: 0.3px;
}
.source-badge svg {
  width: 10px;
  height: 10px;
}
.card-year {
  margin-left: 3px;
  color: #8a91a7;
  font-size: 8px;
}
.card-save {
  margin-left: auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #777b93;
  padding: 2px;
}
.card-save svg {
  width: 13px;
  height: 13px;
}
.card-save.saved {
  color: #c1aafa;
}
.card-save.saved svg {
  fill: #a489d53b;
}
.paper-title {
  font-family: Space, Inter, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.25px;
  font-weight: 500;
  color: #dfdfec;
  margin-bottom: 11px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  padding: 0;
}
.paper-title:hover {
  color: #c5aff7;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.tag {
  font-size: 7px;
  color: #ac9ccb;
  border: 1px solid #3a304a;
  background: #b18edf07;
  border-radius: 4px;
  padding: 2px 6px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.tag.green {
  color: #8bb6a6;
  border-color: #284137;
  background: #8bb6a606;
}
.tag.blue {
  color: #8dabc9;
  border-color: #2b3a50;
  background: #8dabc906;
}
.summary-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #787f99;
  font-size: 6px;
  letter-spacing: 1.1px;
  margin-bottom: 6px;
}
.summary-label svg {
  width: 10px;
  height: 10px;
  color: #a48cc4;
}
.card-summary {
  font-size: 9px;
  color: #969db3;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-footer {
  border-top: 1px solid #262a36;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-top: 17px;
  padding-top: 12px;
}
.coverage {
  font-size: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #82918e;
  cursor: help;
}
.coverage svg {
  width: 10px;
  height: 10px;
  color: #7db89d;
}
.coverage b {
  font-weight: 400;
  color: #a4c4b6;
}
.detail-link {
  font-size: 8px;
  color: #b8a7d9;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
}
.detail-link svg {
  width: 11px;
  height: 11px;
}
.compare-check {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6e7891;
  font-size: 7px;
  padding-top: 11px;
  cursor: pointer;
}
.compare-check input {
  width: 11px;
  height: 11px;
  margin: 0;
}
.cards-grid.list-view {
  grid-template-columns: 1fr;
}
.cards-grid.list-view .paper-card {
  padding: 20px;
}
.cards-grid.list-view .paper-title {
  -webkit-line-clamp: 2;
}
.cards-grid.list-view .card-summary {
  -webkit-line-clamp: 2;
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.active-filter {
  font-size: 8px;
  background: #a696ff15;
  border: 1px solid #a696ff30;
  border-radius: 4px;
  padding: 3px 7px;
  display: flex;
  gap: 6px;
  align-items: center;
  color: #c0b0e2;
}
.active-filter svg {
  width: 9px;
  height: 9px;
}
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: #7f87a2;
  margin: 24px 0;
}
.page-controls {
  display: flex;
  gap: 5px;
}
.page-controls button {
  border: 1px solid #2d303e;
  border-radius: 5px;
  min-width: 29px;
  height: 29px;
  padding: 4px 8px;
  font-size: 9px;
  color: #a7adc2;
}
.page-controls button.active {
  background: #a696ff1f;
  color: #c7b5ff;
  border-color: #a696ff40;
}
.page-controls svg {
  height: 12px;
  width: 12px;
}
.main-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  margin-top: 35px;
  padding: 20px 0 24px;
  font-size: 8px;
  color: #5e6a83;
}
.main-footer > span:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
}
.footer-dot {
  margin: 0 7px;
  color: #484d64;
}
.mobile-filter-button {
  display: none;
}
[hidden] {
  display: none !important;
}