@import url("/base.css");
:root {
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #34475d;
  background: #f5f8fc;
  font-synthesis: none;
  --blue: #299bdf;
  --dark: #1663a6;
  --line: #e5edf4;
  --muted: #8795a8;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
a {
  text-decoration: none;
  color: inherit;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #086bb8;
  outline-offset: 4px;
}
button {
  border: 0;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
p {
  line-height: 1.8;
}
h1 {
  font-size: 40px;
  line-height: 1.3;
}
h2 {
  font-size: 26px;
}
h3 {
  font-size: 19px;
}
small {
  font-size: 13px;
}
.wrap {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
}
.muted {
  color: var(--muted);
}
.blue {
  color: var(--blue);
}
.row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.between {
  justify-content: space-between;
}
.pill {
  display: inline-block;
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 99px;
  background: #edf7ff;
  color: #318aca;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 7px;
  padding: 11px 23px;
  background: linear-gradient(120deg, #58b9ed, #2698dd);
  color: white;
  box-shadow: 0 5px 12px #339edd24;
  white-space: nowrap;
}
.button.secondary {
  background: white;
  color: var(--blue);
  border: 1px solid #c9e5f8;
  box-shadow: none;
}
.button.small {
  font-size: 14px;
  padding: 8px 15px;
}
.text-button {
  background: transparent;
  color: var(--blue);
  padding: 5px;
}
.topbar {
  background: #3b485b;
  color: #d9e3ed;
  font-size: 13px;
  padding: 8px 0;
}
.topbar .row {
  gap: 20px;
}
.topbar a:hover {
  color: white;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #2e98dc;
  white-space: nowrap;
}
.brand img {
  width: 36px;
  height: 36px;
}
.brand strong {
  font-size: 27px;
  font-family: Georgia, "Microsoft YaHei", serif;
  font-weight: 700;
}
.brand small {
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  color: #83bce4;
  text-align: center;
}
.header {
  background: white;
  border-bottom: 1px solid var(--line);
}
.header-main {
  height: 93px;
}
.header-user {
  font-size: 14px;
}
.header-user .points {
  font-size: 20px;
  font-weight: 700;
  color: var(--blue);
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #f1f5f9;
  min-height: 55px;
}
.nav a {
  position: relative;
  padding: 17px 12px;
  font-size: 15px;
  white-space: nowrap;
}
.nav a.active {
  color: var(--blue);
  font-weight: 700;
}
.nav a.active:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 3px;
  background: var(--blue);
}
.nav a:hover {
  color: var(--blue);
}
.nav .tag {
  font-size: 10px;
  color: #fff;
  background: #ff877a;
  position: absolute;
  right: -7px;
  top: 4px;
  padding: 1px 5px;
  border-radius: 4px;
}
.hero {
  background: #e4f3fe;
  position: relative;
  overflow: hidden;
}
.hero-inner {
  min-height: 358px;
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
}
.hero-art {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  z-index: -1;
}
.hero-copy {
  padding: 35px 35px;
  max-width: 570px;
}
.hero-copy .eyebrow {
  color: #4a92c2;
  font-size: 14px;
  letter-spacing: 3px;
  margin-bottom: 16px;
}
.hero h1 {
  color: #206aab;
  font-size: 43px;
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.hero p {
  color: #678bb0;
  max-width: 420px;
  margin-bottom: 24px;
}
.hero-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  display: flex;
  gap: 8px;
}
.hero-dots button {
  width: 8px;
  height: 8px;
  background: #bdd5e8;
  border-radius: 50%;
  padding: 0;
}
.hero-dots button.active {
  width: 24px;
  border-radius: 8px;
  background: #329ede;
}
.announcement {
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.announcement .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}
.announcement strong {
  white-space: nowrap;
  color: var(--blue);
}
.announcement p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  color: #7e8fa2;
  flex: 1;
}
.quick-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 28px auto 40px;
}
.quick-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  text-align: left;
  background: none;
  color: inherit;
  position: relative;
}
.quick-link + .quick-link:before {
  content: "";
  position: absolute;
  left: 0;
  height: 42px;
  width: 1px;
  background: var(--line);
}
.quick-link strong {
  font-size: 16px;
  display: block;
  margin-bottom: 4px;
}
.quick-link small {
  color: var(--muted);
}
.quick-icon {
  font-size: 28px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #edf7ff;
  color: #4ba5df;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
}
.section-head h2 {
  margin: 0;
}
.section-head h2 small {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 2px;
  color: #a4b2c3;
  margin-left: 15px;
}
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tabs button {
  padding: 8px 14px;
  border-radius: 5px;
  color: #8090a4;
  background: transparent;
  font-size: 14px;
}
.tabs button.active {
  background: #e5f3fd;
  color: var(--blue);
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.game-card {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px #2448680d;
}
.game-art {
  height: 173px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(120deg, #e0efff, #bfcffe);
  color: #4875bc;
}
.game-card.memory .game-art {
  background: linear-gradient(120deg, #e9e2ff, #c6bbf1);
  color: #8061bf;
}
.game-card.quiz .game-art {
  background: linear-gradient(120deg, #dcf6f6, #b3e2ea);
  color: #35909b;
}
.game-art h3 {
  font-size: 24px;
  margin: 9px 0;
}
.game-art small {
  letter-spacing: 2px;
  font-size: 11px;
}
.game-symbol {
  font-size: 68px;
  filter: drop-shadow(0 8px 5px #6982ba26);
  transform: rotate(-8deg);
}
.game-body {
  padding: 22px;
}
.game-body p {
  color: #8796a8;
  font-size: 14px;
  min-height: 48px;
  margin-bottom: 20px;
}
.game-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.game-bottom span {
  font-size: 13px;
  color: #91a1b5;
}
.home-bottom {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-top: 35px;
  margin-bottom: 45px;
}
.panel {
  padding: 28px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.panel h3 {
  margin-bottom: 22px;
}
.benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.benefits span {
  display: block;
  font-size: 30px;
  margin-bottom: 12px;
  color: #61ade0;
}
.benefits strong {
  display: block;
  font-size: 15px;
  margin-bottom: 8px;
}
.benefits p {
  font-size: 13px;
  color: #92a0b2;
  margin: 0;
}
.checkin-panel {
  background: linear-gradient(130deg, #e4f3ff, #f6fbff);
  border-color: #d9eaf8;
}
.checkin-panel .big {
  font-size: 38px;
  font-weight: 700;
  color: #368fc8;
}
.checkin-panel p {
  font-size: 14px;
  color: #7d94ad;
}
.footer {
  border-top: 1px solid var(--line);
  background: white;
  padding: 28px 0;
  color: #94a2b3;
  font-size: 13px;
}
.footer .brand strong {
  font-size: 23px;
}
.footer p {
  margin: 14px 0 0;
}
.float-tools {
  position: fixed;
  right: 18px;
  top: 45%;
  display: grid;
  gap: 8px;
}
.float-tools button,
.float-tools a {
  display: grid;
  place-items: center;
  gap: 5px;
  background: #61afe1;
  color: white;
  width: 62px;
  min-height: 62px;
  border-radius: 8px;
  font-size: 12px;
  padding: 7px;
}
.float-tools b {
  font-size: 22px;
}
.page {
  padding-top: 36px;
  padding-bottom: 50px;
  min-height: 60vh;
}
.breadcrumb {
  font-size: 13px;
  color: #9ba7b6;
  margin-bottom: 24px;
}
.page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}
.page-title h1 {
  font-size: 30px;
  margin-bottom: 8px;
}
.page-title p {
  color: #8496aa;
  font-size: 14px;
  margin: 0;
}
.empty {
  text-align: center;
  color: #8a9bae;
  padding: 50px 15px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.stat {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
}
.stat strong {
  display: block;
  font-size: 30px;
  color: var(--blue);
  margin-top: 12px;
}
.stat span {
  font-size: 14px;
  color: #8998a9;
}
.table-scroll {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  white-space: nowrap;
}
th {
  text-align: left;
  color: #8494a7;
  background: #f7fafd;
  font-weight: 400;
}
th,
td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--line);
}
.positive {
  color: #25a18b;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field {
  display: grid;
  gap: 9px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #64788f;
}
.field input,
.field textarea,
.field select {
  border: 1px solid #dae5ee;
  border-radius: 7px;
  padding: 12px 14px;
  width: 100%;
  color: #34506c;
  background: white;
  outline: none;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #39a4e414;
}
.field textarea {
  resize: vertical;
  min-height: 110px;
}
.help {
  color: #9aa6b6;
  font-size: 13px;
  line-height: 1.7;
}
.admin-game {
  border-bottom: 1px solid var(--line);
  padding: 15px 0;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-game h3 {
  margin: 0;
  flex: 1;
}
.admin-game input[type="number"] {
  width: 90px;
  padding: 9px;
  border: 1px solid #d9e6ef;
  border-radius: 5px;
}
.admin-game label {
  font-size: 14px;
}
.admin-tabs {
  margin-bottom: 25px;
}
.space-top {
  margin-top: 24px;
}
.game-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 26px;
}
.play-board {
  min-height: 400px;
  padding: 38px;
  text-align: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.play-board h2 {
  font-size: 25px;
}
.play-board > p {
  color: #8c9db1;
}
.choices {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
}
.choice {
  background: #f0f7ff;
  border: 1px solid #d8eaf8;
  border-radius: 14px;
  padding: 22px;
  min-width: 120px;
  color: #6589ad;
  transition: 0.15s;
}
.choice:hover {
  background: #dbedff;
  transform: translateY(-4px);
}
.choice b {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}
.round-result {
  background: #eff9f6;
  border: 1px solid #d1ede2;
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
}
.round-result strong {
  font-size: 25px;
  display: block;
  color: #309b80;
  margin: 10px;
}
.rules p {
  font-size: 14px;
  color: #8695a8;
}
.rules li {
  font-size: 14px;
  line-height: 2;
  color: #8695a8;
}
.memory-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 520px;
  margin: 25px auto;
}
.memory-card {
  aspect-ratio: 1.1;
  border-radius: 10px;
  background: linear-gradient(140deg, #a8d5fb, #7faff1);
  font-size: 35px;
  color: white;
  transition: 0.2s;
}
.memory-card.revealed {
  background: #eef5fd;
}
.memory-card.matched {
  background: #e1f6ee;
}
.quiz-options {
  display: grid;
  gap: 12px;
  text-align: left;
  margin: 25px 0;
}
.quiz-options button {
  text-align: left;
  padding: 17px 22px;
  border-radius: 8px;
  background: #f6f9fd;
  border: 1px solid #dce8f3;
  color: #536d86;
}
.quiz-options button:hover {
  border-color: #53a7dc;
  background: #edf7ff;
}
.quiz-options b {
  color: var(--blue);
  margin-right: 16px;
}
.progress {
  height: 5px;
  background: #e7eef5;
  border-radius: 9px;
  overflow: hidden;
  margin: 25px 0;
}
.progress-fill {
  height: 100%;
  background: #58ade1;
}
.entry {
  min-height: 100vh;
  background: #e9f5ff;
  position: relative;
  display: grid;
  place-items: center;
  padding: 50px 24px;
  overflow: hidden;
}
.entry .entry-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.entry-content {
  position: relative;
  max-width: 1050px;
  width: 100%;
  text-align: center;
}
.entry .brand {
  justify-content: center;
  margin-bottom: 45px;
}
.entry .brand strong {
  font-size: 44px;
}
.entry .brand img {
  width: 52px;
  height: 52px;
}
.entry h1 {
  color: #256b9d;
  font-size: 38px;
  letter-spacing: 4px;
  margin-bottom: 16px;
}
.entry-intro {
  color: #6c96b6;
  font-size: 16px;
}
.entry-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 42px 0 25px;
}
.entry-card {
  padding: 35px 20px;
  border-radius: 16px;
  background: #ffffffde;
  border: 1px solid white;
  box-shadow: 0 12px 40px #5b97c612;
  transition: 0.2s;
}
.entry-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px #5b97c62b;
}
.entry-card span {
  font-size: 38px;
  display: block;
  margin-bottom: 20px;
  color: var(--blue);
}
.entry-card strong {
  display: block;
  font-size: 20px;
  color: #367eaf;
  margin-bottom: 10px;
}
.entry-card p {
  font-size: 14px;
  color: #96a8b9;
  margin: 0;
}
.entry-foot {
  margin-top: 40px;
  color: #7295af;
  font-size: 13px;
}
.connection {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #70a1bb;
  font-size: 13px;
}
.connection i {
  width: 7px;
  height: 7px;
  background: #69ba97;
  border-radius: 50%;
}
dialog {
  border: 0;
  border-radius: 14px;
  padding: 0;
  width: min(460px, calc(100% - 32px));
  max-height: 90vh;
  color: #435d77;
  box-shadow: 0 20px 90px #214a7933;
}
dialog::backdrop {
  background: #263e5d65;
  backdrop-filter: blur(3px);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 23px 28px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 {
  font-size: 22px;
  margin: 0;
}
.modal-head button {
  background: none;
  font-size: 26px;
  color: #8eb2ce;
  line-height: 1;
}
.modal-body {
  padding: 26px 28px;
}
.modal-body .button {
  width: 100%;
}
.auth-tabs {
  display: flex;
  gap: 25px;
  margin-bottom: 25px;
}
.auth-tabs button {
  background: none;
  color: #98a7b7;
  padding: 0 0 8px;
}
.auth-tabs button.active {
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
}
.form-error {
  color: #cf5a5a;
  font-size: 14px;
  min-height: 20px;
  margin-bottom: 12px;
}
.notice-content {
  white-space: pre-wrap;
  line-height: 1.9;
  color: #738ca5;
}
.notice-icon {
  font-size: 42px;
  color: var(--blue);
  margin-bottom: 16px;
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 35px;
  transform: translate(-50%, 20px);
  background: #254c70;
  color: white;
  padding: 13px 23px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 6px 30px #173c7133;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: 0.2s;
  max-width: calc(100% - 30px);
  text-align: center;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.loading {
  padding: 100px;
  text-align: center;
  color: #6c9bbe;
}
.rank-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #e8f5ff;
  color: #389bdb;
  border-radius: 50%;
  font-weight: 700;
}
.rank-top {
  background: #fff1d0;
  color: #dba140;
}
.inline-error {
  background: #fff1f1;
  border: 1px solid #f6d9d9;
  border-radius: 8px;
  padding: 15px;
  color: #bc6262;
  margin-bottom: 20px;
}
@media (min-width: 1500px) {
  .hero-inner {
    min-height: 390px;
  }
}
@media (max-width: 1330px) {
  .float-tools {
    display: none;
  }
}
@media (max-width: 1000px) {
  .quick-link {
    padding: 18px 14px;
    gap: 8px;
  }
  .quick-icon {
    width: 38px;
    font-size: 23px;
  }
  .nav {
    overflow: auto;
    justify-content: flex-start;
  }
  .hero-copy {
    padding-left: 15px;
  }
  .hero h1 {
    font-size: 36px;
  }
  .hero-copy p {
    max-width: 330px;
  }
  .game-grid {
    gap: 14px;
  }
  .game-symbol {
    font-size: 48px;
  }
  .game-art {
    padding: 18px;
  }
  .game-art h3 {
    font-size: 22px;
  }
  .game-layout {
    grid-template-columns: 1fr 250px;
  }
  .play-board {
    padding: 25px;
  }
  .choice {
    min-width: 90px;
    padding: 18px;
  }
  .home-bottom {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .wrap {
    width: calc(100% - 30px);
  }
  .topbar .row {
    gap: 8px;
  }
  .topbar .optional {
    display: none;
  }
  .topbar {
    font-size: 12px;
  }
  .header-main {
    height: 80px;
  }
  .brand strong {
    font-size: 22px;
  }
  .brand img {
    width: 30px;
    height: 30px;
  }
  .brand small {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .header-user .optional {
    display: none;
  }
  .header-user {
    gap: 7px;
  }
  .header-user .button {
    padding: 8px 12px;
    font-size: 13px;
  }
  .header-user .points {
    font-size: 16px;
  }
  .nav {
    gap: 6px;
  }
  .nav a {
    font-size: 14px;
    padding: 14px 10px;
  }
  .hero-inner {
    min-height: 330px;
  }
  .hero-art {
    opacity: 0.5;
    object-position: 60%;
  }
  .hero-copy {
    padding: 30px 5px;
    max-width: 100%;
    text-shadow: 0 1px 12px white;
  }
  .hero h1 {
    font-size: 32px;
  }
  .hero p {
    font-size: 14px;
    max-width: 280px;
  }
  .hero-copy .eyebrow {
    font-size: 12px;
  }
  .quick-links {
    grid-template-columns: 1fr 1fr;
    margin: 20px auto 28px;
  }
  .quick-link {
    padding: 18px 13px;
  }
  .quick-link:nth-child(3),
  .quick-link:nth-child(4) {
    border-top: 1px solid var(--line);
  }
  .quick-link:nth-child(3):before {
    display: none;
  }
  .quick-link strong {
    font-size: 14px;
  }
  .quick-link small {
    font-size: 12px;
  }
  .game-grid {
    grid-template-columns: 1fr;
  }
  .game-art {
    height: 150px;
    padding: 25px;
  }
  .game-symbol {
    font-size: 65px;
  }
  .game-body {
    padding: 20px;
  }
  .game-body p {
    min-height: 0;
  }
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .section-head h2 {
    font-size: 23px;
  }
  .home-bottom {
    grid-template-columns: 1fr;
  }
  .panel {
    padding: 22px;
  }
  .footer .row {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }
  .stats {
    gap: 10px;
  }
  .stat {
    padding: 15px;
  }
  .stat strong {
    font-size: 25px;
  }
  .stat span {
    font-size: 12px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .page {
    padding-top: 24px;
  }
  .page-title h1 {
    font-size: 27px;
  }
  .game-layout {
    grid-template-columns: 1fr;
  }
  .play-board {
    padding: 24px 15px;
  }
  .choice {
    padding: 15px;
    min-width: 75px;
  }
  .choice b {
    font-size: 35px;
  }
  .choices {
    gap: 12px;
  }
  .memory-board {
    gap: 9px;
  }
  .memory-card {
    font-size: 30px;
  }
  .entry-links {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 28px;
  }
  .entry-card {
    padding: 20px;
    display: grid;
    grid-template-columns: 60px 1fr;
    text-align: left;
  }
  .entry-card span {
    grid-row: span 2;
    margin: 0;
    align-self: center;
  }
  .entry-card strong {
    font-size: 18px;
    margin-bottom: 5px;
  }
  .entry .brand {
    margin-bottom: 25px;
  }
  .entry .brand strong {
    font-size: 34px;
  }
  .entry h1 {
    font-size: 29px;
    letter-spacing: 1px;
  }
  .entry {
    padding: 30px 20px;
  }
  .entry-foot {
    margin-top: 25px;
  }
  .announcement .wrap {
    gap: 10px;
  }
  .announcement p {
    font-size: 13px;
  }
  .page-title {
    gap: 10px;
  }
  .page-title > .button {
    font-size: 13px;
    padding: 9px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.catalog-page{max-width:1248px}.catalog-heading{font-size:22px;margin:0 0 20px}.catalog-providers{display:grid;grid-template-columns:repeat(6,1fr);background:#282828}.catalog-providers button{background:transparent;border:0;border-right:1px solid #454545;color:#8da7b7;padding:14px 5px;cursor:pointer}.catalog-providers button.active{color:white}.catalog-banner{position:relative;background:#111}.catalog-banner-art{aspect-ratio:1200/310;background-repeat:no-repeat}.catalog-banner-footer{display:flex;justify-content:space-between;align-items:center;background:#161616e8;padding:8px 18px}.catalog-banner-footer>button{border:1px solid #aaa;border-radius:20px;background:transparent;color:#ccc;padding:6px 25px;cursor:pointer}.catalog-banner-footer>div{display:flex;gap:8px}.catalog-banner-footer>div button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#777;cursor:pointer}.catalog-banner-footer>div button.active{background:white}.catalog-filters{display:flex;justify-content:space-between;background:#edf2f7;border:1px solid #ddd}.catalog-filters nav{display:flex;overflow:auto}.catalog-filters button{padding:10px 20px;border:0;background:transparent;white-space:nowrap;cursor:pointer;color:#315474}.catalog-filters button.active{background:white}.catalog-utilities{display:flex}.catalog-utilities button{padding:8px 12px;border-left:1px solid #ddd;font-size:21px}.catalog-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:16px}.catalog-card{position:relative;background:#aaa;padding:5px 5px 0;min-width:0}.catalog-open{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left}.catalog-art{display:block;aspect-ratio:1;background-image:url('/assets/catalog-reference.png');background-size:776.666667% 428.333333%;background-repeat:no-repeat}.catalog-title{display:block;padding:7px 25px 7px 2px;color:white;font-size:16px}.catalog-star{position:absolute;bottom:5px;right:4px;border:0;background:none;color:#717171;font-size:20px;cursor:pointer}.catalog-star[aria-pressed=true]{color:#ffe05c}.catalog-search{padding:14px;background:white}.catalog-search[hidden]{display:none}.catalog-search input{max-width:320px;margin-left:12px}.catalog-empty{grid-column:1/-1;padding:30px}.catalog-banner-0{background-image:url('/assets/catalog-banner-0.png')}.catalog-banner-1{background-image:url('/assets/catalog-banner-1.png')}.catalog-banner-2{background-image:url('/assets/catalog-banner-2.png')}.catalog-banner-3{background-image:url('/assets/catalog-banner-3.png')}
@media(max-width:800px){.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-providers{grid-template-columns:repeat(3,1fr)}.catalog-filters{flex-wrap:wrap}.catalog-filters nav{width:100%}.catalog-filters button{padding:10px 14px}.catalog-banner-art{min-height:0}.catalog-title{font-size:14px}}

.tile-col-0{background-position-x:2.709360%}
.tile-col-1{background-position-x:19.293924%}
.tile-col-2{background-position-x:35.878489%}
.tile-col-3{background-position-x:52.463054%}
.tile-col-4{background-position-x:68.965517%}
.tile-col-5{background-position-x:85.550082%}
.tile-row-0{background-position-y:11.844332%}
.tile-row-1{background-position-y:51.438240%}
.tile-row-2{background-position-y:91.032149%}
.catalog-banner-0{background-size:117.250000% 231.290323%;background-position:52.657005% 13.267813%}
.catalog-banner-1{background-size:117.000000% 256.129032%;background-position:40.196078% 15.909091%}
.catalog-banner-2{background-size:110.500000% 244.193548%;background-position:43.650794% 13.870246%}
.catalog-banner-3{background-size:116.416667% 257.741935%;background-position:38.578680% 15.950920%}
button.catalog-banner-art{display:block;width:100%;padding:0;border:0;cursor:pointer}

/* Member dashboard and registration captcha */
.member-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;align-items:start}
.member-menu{display:flex;flex-direction:column;gap:8px;padding:16px;position:sticky;top:16px}
.member-menu a{padding:13px 16px;border-radius:8px;color:#345;text-decoration:none}
.member-menu a.active{background:#e7f4ff;color:#087bbb;font-weight:700}
.member-content{min-width:0}.member-content input{max-width:100%}.negative{color:#c23b3b}
.captcha-row{display:flex;align-items:center;gap:12px;margin:12px 0}.captcha-row img{background:#eef6fc;border:1px solid #dce6ee;border-radius:6px}
@media(max-width:700px){.member-layout{grid-template-columns:1fr;gap:14px}.member-menu{position:static;display:grid;grid-template-columns:1fr 1fr}.member-menu a{text-align:center;padding:10px}.captcha-row{flex-wrap:wrap}}