/* iWander topic hubs — generated-page presentation, 2026-07-19 */
.topic-hub-page {
  --topic-ink: #111111;
  --topic-muted: #656565;
  --topic-line: rgba(17, 17, 17, 0.14);
  --topic-paper: #ffffff;
  --topic-tint: #f3f3f0;
  --topic-panel: #fafaf8;
  --topic-accent: #2864f0;
  background: var(--topic-paper);
  color: var(--topic-ink);
}

[data-theme="dark"] .topic-hub-page {
  --topic-ink: #f4f4f0;
  --topic-muted: #ababaa;
  --topic-line: rgba(255, 255, 255, 0.16);
  --topic-paper: #111211;
  --topic-tint: #191a19;
  --topic-panel: #202120;
  --topic-accent: #7aa2ff;
}

.topic-hub-page .site-header {
  border-bottom-color: var(--topic-line);
}

.topic-hub {
  overflow: clip;
  background: var(--topic-paper);
}

.topic-hub a {
  text-underline-offset: 0.18em;
}

.topic-hero {
  position: relative;
  min-height: min(680px, 82svh);
  display: grid;
  align-items: end;
  padding: clamp(112px, 15vw, 190px) 0 clamp(64px, 9vw, 110px);
  border-bottom: 1px solid var(--topic-line);
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), var(--topic-line) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(var(--topic-paper), var(--topic-paper));
}

.topic-hero::before,
.topic-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.topic-hero::before {
  inset: 0;
  background: radial-gradient(circle at 75% 35%, color-mix(in srgb, var(--topic-accent) 14%, transparent), transparent 33%);
}

.topic-hero::after {
  left: 0;
  right: 0;
  bottom: 24px;
  height: 1px;
  background: var(--topic-line);
}

.topic-hub--iphone { --topic-accent: #315fe9; }
.topic-hub--ipad { --topic-accent: #8058d8; }
.topic-hub--mac { --topic-accent: #0d8178; }
.topic-hub--apple-watch { --topic-accent: #d44774; }
.topic-hub--airpods-home { --topic-accent: #c15b24; }
.topic-hub--ios { --topic-accent: #1776c6; }

.topic-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  gap: clamp(36px, 7vw, 110px);
  align-items: end;
}

.topic-hero__copy {
  max-width: 820px;
}

.topic-hero__eyebrow,
.topic-section__eyebrow,
.topic-start-card__number,
.topic-section__number,
.topic-hero__meta,
.topic-intro__label,
.topic-switcher span,
.topic-product-card > div > span,
.topic-rumor-card > div > span,
.topic-update-card > span,
.topic-os-summary__meta span {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.topic-hero__eyebrow {
  margin: 0 0 22px;
  color: var(--topic-accent);
  font-size: clamp(0.82rem, 1.2vw, 1rem);
}

.topic-hero h1 {
  max-width: 12em;
  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: clamp(2.65rem, 7.5vw, 6.6rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.topic-hero__lead {
  max-width: 720px;
  margin: clamp(26px, 4vw, 44px) 0 0;
  color: var(--topic-muted);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.95;
}

.topic-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--topic-line);
  color: var(--topic-muted);
  font-size: 0.78rem;
}

.topic-hero__mark {
  min-height: 310px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid var(--topic-line);
  border-radius: 50%;
  aspect-ratio: 1;
}

.topic-hero__mark::before,
.topic-hero__mark::after {
  content: "";
  position: absolute;
  background: var(--topic-line);
}

.topic-hero__mark::before { width: 120%; height: 1px; }
.topic-hero__mark::after { width: 1px; height: 120%; }

.topic-hero__mark span {
  position: relative;
  z-index: 1;
  max-width: 80%;
  padding: 14px 18px;
  background: var(--topic-paper);
  color: var(--topic-accent);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  font-weight: 700;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
}

.topic-intro {
  padding: clamp(64px, 9vw, 112px) 0;
  border-bottom: 1px solid var(--topic-line);
}

.topic-intro__grid {
  display: grid;
  grid-template-columns: minmax(140px, 0.34fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 120px);
}

.topic-intro__label {
  margin: 5px 0 0;
  color: var(--topic-accent);
  font-size: 0.82rem;
}

.topic-intro__grid > div {
  max-width: 900px;
}

.topic-intro__grid > div p {
  margin: 0;
  color: var(--topic-ink);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 500;
  line-height: 2.05;
}

.topic-intro__grid > div p + p {
  margin-top: 1.35em;
  color: var(--topic-muted);
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
}

.topic-section {
  padding: clamp(70px, 10vw, 130px) 0;
  border-bottom: 1px solid var(--topic-line);
}

.topic-section--tint {
  background: var(--topic-tint);
}

.topic-section--start {
  padding-top: clamp(58px, 8vw, 96px);
  padding-bottom: clamp(58px, 8vw, 96px);
}

.topic-section__head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 54px);
  margin-bottom: clamp(36px, 6vw, 72px);
}

.topic-section__number {
  margin: 5px 0 0;
  color: var(--topic-accent);
  font-size: 0.85rem;
}

.topic-section__eyebrow {
  margin: 0 0 10px;
  color: var(--topic-muted);
  font-size: 0.78rem;
}

.topic-section__head h2,
.topic-decision h2 {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: clamp(2rem, 4.5vw, 4.25rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.topic-section__head > div > p:last-child {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--topic-muted);
  line-height: 1.85;
}

.topic-start-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--topic-line);
  border-bottom: 1px solid var(--topic-line);
}

.topic-start-card {
  position: relative;
  min-height: 230px;
  display: grid;
  align-content: start;
  gap: 15px;
  padding: clamp(26px, 4vw, 46px);
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

.topic-start-card + .topic-start-card {
  border-left: 1px solid var(--topic-line);
}

.topic-start-card:hover,
.topic-start-card:focus-visible {
  background: var(--topic-ink);
  color: var(--topic-paper);
}

.topic-start-card__number {
  color: var(--topic-accent);
  font-size: 0.78rem;
}

.topic-start-card strong {
  max-width: 13em;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.45;
}

.topic-start-card > span:not(.topic-start-card__number) {
  color: var(--topic-muted);
  font-size: 0.92rem;
  line-height: 1.75;
}

.topic-start-card b {
  position: absolute;
  right: 30px;
  bottom: 26px;
  font-size: 1.4rem;
}

.topic-editorial-groups {
  border-top: 1px solid var(--topic-line);
}

.topic-editorial-group {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(34px, 5vw, 62px) 0;
  border-bottom: 1px solid var(--topic-line);
}

.topic-editorial-group__head h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.4;
}

.topic-editorial-group__head > p:not(:first-child) {
  max-width: 23em;
  margin: 15px 0 0;
  color: var(--topic-muted);
  font-size: 0.88rem;
  line-height: 1.8;
}

.topic-editorial-group__link {
  display: inline-block;
  margin-top: 20px;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration-thickness: 1px;
}

.topic-editorial-group .topic-article-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.topic-article-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 52px) clamp(22px, 4vw, 44px);
}

.topic-article-card {
  display: grid;
  grid-template-columns: minmax(150px, 0.82fr) minmax(0, 1.18fr);
  min-height: 230px;
  border-top: 1px solid var(--topic-line);
  padding-top: 20px;
}

.topic-article-card__image {
  min-height: 190px;
  overflow: hidden;
  background: var(--topic-tint);
}

.topic-article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.topic-article-card:hover .topic-article-card__image img {
  transform: scale(1.025);
}

.topic-article-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2px 0 0 clamp(18px, 3vw, 32px);
}

.topic-article-card time {
  color: var(--topic-muted);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.topic-article-card :is(h3, h4) {
  margin: 12px 0 0;
  font-size: clamp(1.03rem, 1.55vw, 1.32rem);
  line-height: 1.55;
}

.topic-article-card :is(h3, h4) a {
  color: inherit;
  text-decoration: none;
}

.topic-article-card p {
  margin: 12px 0 0;
  color: var(--topic-muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

.topic-text-link {
  margin-top: auto;
  padding-top: 18px;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.topic-article-index {
  margin-top: clamp(42px, 6vw, 72px);
  padding-top: clamp(24px, 4vw, 38px);
  border-top: 1px solid var(--topic-line);
}

.topic-article-index__head {
  display: flex;
  gap: 24px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 20px;
}

.topic-article-index__head .topic-section__eyebrow {
  margin: 0 0 8px;
}

.topic-article-index__head h3 {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.4;
}

.topic-article-index__count {
  flex: none;
  color: var(--topic-muted);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.topic-article-index__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 52px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-article-index__list li {
  min-width: 0;
  border-top: 1px solid var(--topic-line);
}

.topic-article-index__list a {
  min-width: 0;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
}

.topic-article-index__list time {
  color: var(--topic-muted);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.topic-article-index__list span {
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.topic-article-index__list a:hover span,
.topic-article-index__list a:focus-visible span {
  text-decoration: underline;
}

.topic-article-index__empty {
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--topic-line);
  border-bottom: 1px solid var(--topic-line);
  color: var(--topic-muted);
  font-size: 0.88rem;
}

.topic-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--topic-line);
  border: 1px solid var(--topic-line);
}

.topic-product-card {
  display: grid;
  grid-template-rows: 250px 1fr;
  min-width: 0;
  background: var(--topic-paper);
  color: inherit;
  text-decoration: none;
}

.topic-product-card figure {
  min-width: 0;
  margin: 0;
  padding: 30px;
  display: grid;
  place-items: center;
  background: var(--topic-panel);
  overflow: hidden;
}

.topic-product-card figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 280ms ease;
}

.topic-product-card:hover figure img {
  transform: scale(1.04);
}

.topic-product-card > div {
  display: flex;
  flex-direction: column;
  padding: 28px;
}

.topic-product-card > div > span {
  color: var(--topic-accent);
  font-size: 0.72rem;
}

.topic-product-card h3 {
  margin: 9px 0 0;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.3;
}

.topic-product-card p {
  margin: 14px 0 0;
  color: var(--topic-muted);
  font-size: 0.88rem;
  line-height: 1.75;
}

.topic-product-card dl {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--topic-line);
}

.topic-product-card dl div {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.78rem;
}

.topic-product-card dt { color: var(--topic-muted); }
.topic-product-card dd { margin: 0; text-align: right; }
.topic-product-card b { margin-top: auto; padding-top: 22px; font-size: 0.78rem; }

.topic-rumor-list {
  border-top: 1px solid var(--topic-line);
}

.topic-rumor-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(250px, 0.75fr) 32px;
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--topic-line);
  color: inherit;
  text-decoration: none;
}

.topic-rumor-card > div > span {
  color: var(--topic-accent);
  font-size: 0.72rem;
}

.topic-rumor-card h3 {
  margin: 10px 0 0;
  font-size: clamp(1.25rem, 2.35vw, 2rem);
  line-height: 1.4;
}

.topic-rumor-card p {
  max-width: 720px;
  margin: 13px 0 0;
  color: var(--topic-muted);
  line-height: 1.75;
}

.topic-rumor-card dl {
  display: grid;
  gap: 14px;
  margin: 0;
}

.topic-rumor-card dl div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 15px;
  font-size: 0.8rem;
}

.topic-rumor-card dt { color: var(--topic-muted); }
.topic-rumor-card dd { margin: 0; line-height: 1.6; }
.topic-rumor-card > b { font-size: 1.5rem; transition: transform 180ms ease; }
.topic-rumor-card:hover > b { transform: translateX(7px); }

.topic-os-summary {
  display: grid;
  gap: 32px;
}

.topic-os-summary__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--topic-line);
  border-bottom: 1px solid var(--topic-line);
}

.topic-os-summary__meta span {
  color: var(--topic-muted);
  font-size: 0.74rem;
}

.topic-os-summary__meta strong {
  font-size: 1.05rem;
}

.topic-update-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.topic-update-card {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--topic-line);
  background: var(--topic-paper);
}

.topic-update-card > span {
  color: var(--topic-accent);
  font-size: 0.72rem;
}

.topic-update-card h3 {
  margin: 12px 0 0;
  font-size: 1.35rem;
  line-height: 1.4;
}

.topic-update-card dl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 22px 0 0;
  padding: 15px 0;
  border-top: 1px solid var(--topic-line);
  border-bottom: 1px solid var(--topic-line);
}

.topic-update-card dl div { display: flex; gap: 8px; font-size: 0.78rem; }
.topic-update-card dt { color: var(--topic-muted); }
.topic-update-card dd { margin: 0; }
.topic-update-card p { color: var(--topic-muted); font-size: 0.88rem; line-height: 1.75; }
.topic-update-card > strong { display: block; margin-top: 18px; font-size: 0.86rem; }

.topic-button {
  width: fit-content;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(34px, 5vw, 56px);
  padding: 13px 20px;
  border: 1px solid var(--topic-ink);
  background: var(--topic-ink);
  color: var(--topic-paper);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.topic-button--outline {
  background: transparent;
  color: var(--topic-ink);
}

.topic-button:hover,
.topic-button:focus-visible {
  border-color: var(--topic-accent);
  background: var(--topic-accent);
  color: #ffffff;
}

.topic-section--decision {
  background: var(--topic-ink);
  color: var(--topic-paper);
}

.topic-decision {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 54px);
}

.topic-decision > div {
  max-width: 930px;
}

.topic-decision h2 {
  max-width: 14em;
}

.topic-decision > div > p:not(.topic-section__eyebrow) {
  max-width: 760px;
  margin: 25px 0 0;
  color: color-mix(in srgb, var(--topic-paper) 70%, transparent);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.95;
}

.topic-decision__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.topic-decision__links a {
  display: inline-flex;
  gap: 18px;
  padding: 13px 18px;
  border: 1px solid color-mix(in srgb, var(--topic-paper) 35%, transparent);
  color: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.topic-decision__links a:hover,
.topic-decision__links a:focus-visible {
  border-color: var(--topic-paper);
  background: var(--topic-paper);
  color: var(--topic-ink);
}

.topic-faq-list {
  max-width: 980px;
  margin-left: 126px;
  border-top: 1px solid var(--topic-line);
}

.topic-faq-list details {
  border-bottom: 1px solid var(--topic-line);
}

.topic-faq-list summary {
  position: relative;
  padding: 25px 56px 25px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 700;
  line-height: 1.55;
}

.topic-faq-list summary::-webkit-details-marker { display: none; }
.topic-faq-list summary span { position: absolute; right: 8px; font-size: 1.2rem; transition: transform 180ms ease; }
.topic-faq-list details[open] summary span { transform: rotate(45deg); }
.topic-faq-list details p { max-width: 760px; margin: -4px 0 26px; color: var(--topic-muted); line-height: 1.9; }

.topic-switcher {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--topic-line);
  border: 1px solid var(--topic-line);
}

.topic-switcher a {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--topic-paper);
  color: inherit;
  text-decoration: none;
}

.topic-switcher span {
  color: var(--topic-muted);
  font-size: 0.66rem;
}

.topic-switcher strong {
  margin-top: 12px;
  font-size: 1.1rem;
  line-height: 1.35;
}

.topic-switcher b {
  margin-top: auto;
  align-self: flex-end;
}

.topic-switcher a:hover,
.topic-switcher a:focus-visible {
  background: var(--topic-ink);
  color: var(--topic-paper);
}

@media (max-width: 980px) {
  .topic-hero__inner { grid-template-columns: minmax(0, 1fr) 220px; gap: 42px; }
  .topic-hero__mark { min-height: 220px; }
  .topic-article-grid { grid-template-columns: 1fr; }
  .topic-editorial-group .topic-article-grid { grid-template-columns: 1fr; }
  .topic-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-update-grid { grid-template-columns: 1fr; }
  .topic-switcher { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .topic-hero {
    min-height: auto;
    padding-top: 118px;
    background: var(--topic-paper);
  }

  .topic-hero__inner,
  .topic-intro__grid,
  .topic-section__head,
  .topic-decision {
    grid-template-columns: 1fr;
  }

  .topic-hero__mark {
    min-height: 0;
    width: min(68vw, 280px);
    justify-self: end;
  }

  .topic-intro__grid { gap: 22px; }
  .topic-section__head,
  .topic-decision { gap: 14px; }
  .topic-section__number { margin: 0; }

  .topic-editorial-group {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .topic-editorial-group__head > p:not(:first-child) {
    max-width: 38em;
  }

  .topic-start-grid,
  .topic-product-grid {
    grid-template-columns: 1fr;
  }

  .topic-start-card { min-height: 190px; }
  .topic-start-card + .topic-start-card { border-left: 0; border-top: 1px solid var(--topic-line); }

  .topic-article-card {
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: 180px;
  }

  .topic-article-card__image { min-height: 150px; }
  .topic-article-card p { display: none; }

  .topic-article-index__list { grid-template-columns: 1fr; }

  .topic-product-card { grid-template-rows: 220px 1fr; }

  .topic-rumor-card {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 20px;
  }

  .topic-rumor-card dl { grid-column: 1 / -1; }
  .topic-rumor-card > b { grid-column: 2; grid-row: 1; }

  .topic-faq-list { margin-left: 0; }
  .topic-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .topic-hero h1 { font-size: clamp(2.35rem, 13vw, 3.8rem); }
  .topic-hero__mark { width: min(74vw, 250px); }

  .topic-article-card {
    grid-template-columns: 1fr;
  }

  .topic-article-card__image { aspect-ratio: 16 / 9; }
  .topic-article-card__body { padding: 17px 0 0; }
  .topic-text-link { margin-top: 14px; }

  .topic-article-index__head {
    align-items: start;
  }

  .topic-article-index__list a {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .topic-switcher { grid-template-columns: 1fr; }
  .topic-switcher a { min-height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .topic-hub *,
  .topic-hub *::before,
  .topic-hub *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}