:root {
  --ink: #151617;
  --text: #36393d;
  --muted: #747981;
  --quiet: #9ba0a7;
  --line: #dfe2e6;
  --paper: #ffffff;
  --accent: #1769e8;
  --accent-dark: #0d57c9;
  --flow: #33a9c3;
  --flow-soft: rgba(50, 175, 193, .24);
  --shell: min(1480px, calc(100vw - 96px));
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  overflow-x: clip;
  scroll-behavior: smooth;
  background: #fff;
}

body {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: clip;
  overflow-y: auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
a { color: inherit; font: inherit; }

button { cursor: pointer; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }
.shell { width: var(--shell); margin: 0 auto; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 11px 15px;
  background: var(--ink);
  color: #fff;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.site-header { background: #fff; }

.header-inner {
  display: grid;
  height: 88px;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  min-height: 44px;
  justify-self: start;
  align-items: center;
  gap: 22px;
}

.brand strong {
  font-family: var(--serif);
  font-size: clamp(27px, 2.1vw, 34px);
  font-weight: 600;
  letter-spacing: -.05em;
}

.brand small {
  position: relative;
  padding-left: 22px;
  color: #4f5358;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .02em;
}

.brand small::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 34px;
  background: var(--line);
  content: "";
  transform: translateY(-50%);
}

.header-actions {
  display: flex;
  min-width: 0;
  justify-self: end;
  align-items: center;
  gap: 20px;
}

.platform-search,
.header-miniapp {
  display: inline-flex;
  min-height: 46px;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d5d8dc;
  border-radius: 999px;
  background: #fff;
  font-family: var(--serif);
  font-size: 15px;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}

.platform-search:hover { border-color: #9ea5ad; transform: translateY(-1px); }

.header-miniapp {
  gap: 12px;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.header-miniapp:hover { border-color: var(--accent-dark); background: var(--accent-dark); transform: translateY(-1px); }
.header-miniapp img { width: 17px; height: 17px; filter: brightness(0) invert(1); }

.single-screen {
  display: grid;
  min-height: 0;
  padding: clamp(34px, 5.2vh, 54px) 0 0;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  grid-template-rows: clamp(380px, 43vh, 440px) auto;
  column-gap: clamp(46px, 4.6vw, 72px);
  align-items: stretch;
}

.hero-section {
  display: flex;
  min-width: 0;
  align-items: center;
}

.hero-copy { padding: 4px 0 28px 14px; }

.eyebrow {
  margin: 0 0 clamp(34px, 5.2vh, 54px) !important;
  color: #34383d !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.4 !important;
}

.hero-copy h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(56px, 5.25vw, 82px);
  font-weight: 500;
  line-height: 1.37;
  letter-spacing: -.065em;
}

.hero-copy > p:not(.eyebrow) {
  margin: clamp(22px, 3.2vh, 34px) 0 0;
  color: #4e5359;
  font-family: var(--serif);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.75;
  letter-spacing: .04em;
}

.miniapp-panel {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 390px;
  overflow: hidden;
  padding: clamp(36px, 4vh, 46px) clamp(34px, 3.6vw, 54px) 30px;
  align-self: stretch;
  flex-direction: column;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 90%, rgba(255, 224, 215, .72), transparent 34%),
    radial-gradient(circle at 92% 86%, rgba(188, 224, 255, .72), transparent 38%),
    linear-gradient(135deg, #e6f0ff 0%, #f5f8fd 54%, #deedff 100%);
}

.miniapp-heading { position: relative; z-index: 2; }

.miniapp-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(31px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.045em;
}

.miniapp-heading p {
  margin: 10px 0 0;
  color: #4c535c;
  font-family: var(--serif);
  font-size: clamp(14px, 1.22vw, 18px);
  line-height: 1.65;
  letter-spacing: .03em;
}

.feature-list {
  position: relative;
  z-index: 3;
  display: grid;
  margin: clamp(28px, 3.5vh, 38px) 0 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
  list-style: none;
}

.feature-list li {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 68px;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(106, 113, 122, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 5px 18px rgba(56, 91, 128, .04);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease, background .3s ease;
  animation: featureFocus 6s ease-in-out infinite;
}

.feature-list li:nth-child(2) { animation-delay: 1.35s; }
.feature-list li:nth-child(3) { animation-delay: 2.7s; }
.feature-list li:nth-child(4) { animation-delay: 4.05s; }

.feature-list li::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 29px;
  background: rgba(40, 140, 158, .5);
  content: "";
}

.feature-list img { width: 29px; height: 29px; flex: 0 0 auto; object-fit: contain; opacity: .9; }
.feature-list strong { font-family: var(--serif); font-size: clamp(14px, 1.28vw, 18px); font-weight: 500; white-space: nowrap; }

.flow-visual {
  position: relative;
  z-index: 2;
  height: 82px;
  flex: 1 1 82px;
  min-height: 70px;
  pointer-events: none;
}

.flow-rail {
  position: absolute;
  top: 28px;
  right: 12.5%;
  left: 12.5%;
  height: 1px;
  background: rgba(37, 145, 164, .55);
}

.flow-signal {
  position: absolute;
  top: 24px;
  left: 12.5%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #45d5de;
  box-shadow: 0 0 13px rgba(35, 202, 209, .65);
  transform: translateX(-50%);
  animation: signalTravel 6s ease-in-out infinite;
}

.flow-hub {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 17px;
  height: 17px;
  border: 4px solid rgba(122, 226, 199, .45);
  border-radius: 50%;
  background: #18c98a;
  box-shadow: 0 0 0 10px rgba(46, 218, 168, .11), 0 0 22px rgba(38, 207, 160, .42);
  transform: translateX(-50%);
  animation: hubBreath 2.4s ease-in-out infinite;
}

.flow-stem {
  position: absolute;
  top: 34px;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(37, 145, 164, .52);
}

.miniapp-cta {
  position: relative;
  z-index: 3;
  display: flex;
  min-width: 220px;
  min-height: 58px;
  margin: 0 auto;
  padding: 0 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #1d1f21;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 500;
  letter-spacing: .02em;
  transition: background .2s ease, transform .2s ease;
  animation: ctaArrival 6s ease-in-out infinite;
}

.miniapp-cta:hover { background: #000; transform: translateY(-2px); }

.topic-grid {
  display: grid;
  min-width: 0;
  margin: clamp(42px, 7vh, 72px) 0 0;
  padding: 0;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  border-top: 1px solid var(--line);
}

.topic-grid li {
  min-width: 0;
  min-height: clamp(82px, 10vh, 102px);
  border-bottom: 1px solid var(--line);
}

.topic-grid li:nth-child(4n + 1) :is(button, a) { padding-left: 16px; }
.topic-grid li:nth-child(4n) :is(button, a) { padding-right: 16px; }
.topic-grid li:nth-child(7) { grid-column: 3; }

.topic-grid :is(button, a) {
  display: grid;
  width: 100%;
  min-height: inherit;
  padding: 0 clamp(16px, 2vw, 28px);
  grid-template-columns: 58px minmax(0, 1fr) 22px;
  align-items: center;
  border: 0;
  background: transparent;
  text-align: left;
  transition: background .2s ease, color .2s ease;
}

.topic-grid :is(button, a):hover { background: #f7f8fa; color: var(--accent); }

.topic-arrow {
  color: #a5aab1;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1;
  transition: color .2s ease, transform .2s ease;
}

.topic-grid :is(button, a):hover .topic-arrow { color: var(--accent); transform: translate(2px, -2px); }

.topic-number {
  color: #202327;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1;
}

.topic-grid h2 {
  min-width: 0;
  margin: 0;
  padding: 4px 0 4px clamp(18px, 1.8vw, 27px);
  border-left: 1px solid #cfd3d8;
  font-family: var(--serif);
  font-size: clamp(14px, 1.28vw, 19px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.site-footer { background: #fff; }

.platform-row {
  min-height: 78px;
  border-top: 1px solid var(--line);
}

.platform-list {
  display: grid;
  min-width: 0;
  min-height: 78px;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  align-items: center;
  list-style: none;
}

.platform-list li {
  min-width: 0;
  border-right: 1px solid var(--line);
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(9px, .78vw, 12px);
  white-space: nowrap;
}

.platform-list li:first-child > * { justify-content: flex-start; }
.platform-list li:last-child { border-right: 0; }
.platform-list li:last-child > * { justify-content: flex-end; }
.platform-list li > a,
.platform-list li > button {
  display: flex;
  width: 100%;
  min-height: 44px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: inherit;
  white-space: inherit;
  transition: color .2s ease, background .2s ease;
}
.platform-list li > a:hover,
.platform-list li > button:hover { background: #f7f8fa; color: var(--accent); }
.platform-list img { width: 20px; height: 20px; flex: 0 0 auto; opacity: .92; }

.legal-row {
  display: flex;
  min-height: 87px;
  padding-bottom: 0;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: var(--quiet);
  font-family: var(--serif);
  font-size: 10px;
}

.record-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.police-record { display: inline-flex; align-items: center; gap: 4px; }
.police-record-icon { width: 14px; height: 14px; flex: 0 0 auto; object-fit: contain; }
.record-link:hover { color: var(--accent); }
.record-pending { color: var(--accent); }

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  max-width: calc(100vw - 40px);
  padding: 13px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
}

.toast.visible { opacity: 1; transform: translateY(0); }

.content-dialog {
  width: min(620px, calc(100vw - 40px));
  max-width: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
}

.content-dialog::backdrop {
  background: rgba(16, 20, 26, .36);
  backdrop-filter: blur(5px);
}

.dialog-card {
  position: relative;
  overflow: hidden;
  padding: 38px 40px 36px;
  border: 1px solid rgba(21, 22, 23, .09);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(22, 27, 35, .18);
}

.dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: #60656c;
  font-family: var(--sans);
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
}

.dialog-close:hover { background: #e9ebee; color: var(--ink); }
.dialog-kicker { margin: 0 52px 12px 0; color: var(--accent); font-family: var(--sans); font-size: 12px; font-weight: 650; letter-spacing: .1em; }
.dialog-card h2 { margin: 0 52px 14px 0; font-family: var(--serif); font-size: clamp(27px, 3vw, 36px); font-weight: 500; line-height: 1.25; letter-spacing: -.035em; }
.dialog-summary { margin: 0; color: #50555c; font-family: var(--serif); font-size: 16px; line-height: 1.8; }

.topic-details { margin: 26px 0 30px; border-top: 1px solid var(--line); }
.topic-details > div { display: grid; padding: 16px 0; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; border-bottom: 1px solid var(--line); }
.topic-details dt { color: var(--quiet); font-size: 13px; }
.topic-details dd { margin: 0; color: var(--text); font-family: var(--serif); font-size: 15px; line-height: 1.65; }

.dialog-primary,
.dialog-secondary {
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--serif);
  font-size: 14px;
}
.dialog-primary:hover { background: #000; }
.dialog-secondary { width: 100%; border-color: #d7dade; background: #fff; color: var(--ink); }
.dialog-secondary:hover { border-color: #aeb4bb; background: #f8f9fa; }

.qr-dialog { width: min(480px, calc(100vw - 40px)); }
.qr-dialog-card { text-align: center; }
.qr-dialog-card .dialog-kicker,
.qr-dialog-card h2 { margin-right: 0; }
.qr-dialog-card .dialog-summary { max-width: 360px; margin-right: auto; margin-left: auto; }
.qr-frame {
  display: grid;
  width: min(300px, 100%);
  min-height: 300px;
  margin: 24px auto 18px;
  padding: 12px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.qr-frame img { width: 100%; height: auto; max-height: 276px; object-fit: contain; }
.qr-missing { margin: 0; color: var(--quiet); font-family: var(--serif); font-size: 14px; }

@keyframes featureFocus {
  0%, 15%, 100% { border-color: rgba(106, 113, 122, .34); background: rgba(255, 255, 255, .8); box-shadow: 0 5px 18px rgba(56, 91, 128, .04); transform: translateY(0); }
  4%, 10% { border-color: rgba(25, 109, 242, .8); background: rgba(255, 255, 255, .96); box-shadow: 0 0 0 3px rgba(25, 109, 242, .07), 0 8px 22px rgba(25, 109, 242, .1); transform: translateY(-2px); }
}

@keyframes signalTravel {
  0%, 2% { left: 12.5%; opacity: 0; }
  4%, 12% { left: 12.5%; opacity: 1; }
  27%, 34% { left: 37.5%; opacity: 1; }
  50%, 57% { left: 62.5%; opacity: 1; }
  72%, 88% { left: 87.5%; opacity: 1; }
  100% { left: 87.5%; opacity: 0; }
}

@keyframes hubBreath {
  0%, 100% { box-shadow: 0 0 0 7px rgba(46, 218, 168, .08), 0 0 16px rgba(38, 207, 160, .28); transform: translateX(-50%) scale(.92); }
  50% { box-shadow: 0 0 0 12px rgba(46, 218, 168, .13), 0 0 24px rgba(38, 207, 160, .48); transform: translateX(-50%) scale(1.04); }
}

@keyframes ctaArrival {
  0%, 68%, 100% { box-shadow: 0 0 0 rgba(30, 31, 33, 0); }
  76%, 86% { box-shadow: 0 8px 24px rgba(30, 31, 33, .14); }
}

@media (min-width: 961px) and (max-height: 920px) {
  .header-inner { height: 72px; }
  .single-screen { padding-top: 20px; grid-template-rows: minmax(430px, 1fr) auto; }
  .hero-copy { padding-bottom: 16px; }
  .eyebrow { margin-bottom: 24px !important; }
  .hero-copy h1 { font-size: clamp(48px, 4.65vw, 66px); line-height: 1.28; }
  .hero-copy > p:not(.eyebrow) { margin-top: 14px; }
  .miniapp-panel { min-height: 430px; padding-top: 28px; padding-bottom: 20px; }
  .miniapp-heading h2 { font-size: clamp(28px, 2.6vw, 38px); }
  .feature-list { margin-top: 20px; }
  .feature-list li { min-height: 54px; }
  .feature-list img { width: 25px; height: 25px; }
  .flow-visual { min-height: 56px; height: 56px; }
  .miniapp-cta { min-height: 48px; }
  .topic-grid { margin-top: 20px; }
  .topic-grid li { min-height: 62px; }
  .platform-row,
  .platform-list { min-height: 56px; }
  .legal-row { min-height: 28px; padding-bottom: 4px; }
}

@media (min-width: 961px) and (max-width: 1220px) {
  :root { --shell: min(100% - 56px, 1140px); }
  .header-actions { gap: 10px; }
  .platform-search,
  .header-miniapp { padding: 0 16px; }
  .single-screen { grid-template-columns: minmax(0, 39fr) minmax(0, 61fr); column-gap: 32px; }
  .hero-copy { padding-left: 0; }
  .feature-list { gap: 10px; }
  .feature-list li { padding: 0 9px; gap: 7px; }
  .topic-grid :is(button, a) { padding-right: 12px; padding-left: 12px; grid-template-columns: 46px minmax(0, 1fr) 20px; }
  .topic-grid h2 { padding-left: 12px; font-size: 14px; }
  .platform-list li > a,
  .platform-list li > button { padding: 0 4px; gap: 4px; font-size: 9px; }
}

@media (max-width: 960px) {
  :root { --shell: min(100% - 36px, 720px); }
  body { display: block; min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
  .header-inner { height: 72px; grid-template-columns: 1fr auto; }
  .brand { gap: 12px; }
  .brand strong { font-size: 24px; }
  .brand small { padding-left: 12px; font-size: 12px; }
  .brand small::before { height: 24px; }
  .platform-search { display: none; }
  .header-miniapp { min-height: 42px; padding: 0 16px; font-size: 13px; }
  .single-screen {
    display: grid;
    padding: 38px 0 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 34px;
  }
  .hero-section { min-height: 0; }
  .hero-copy { padding: 0; }
  .eyebrow { margin-bottom: 26px !important; font-size: 11px !important; letter-spacing: .11em; }
  .hero-copy h1 { font-size: clamp(47px, 12vw, 68px); line-height: 1.28; }
  .hero-copy > p:not(.eyebrow) { margin-top: 18px; font-size: 16px; }
  .miniapp-panel { min-height: 390px; padding: 30px 24px 24px; border-radius: 20px; }
  .miniapp-heading h2 { font-size: clamp(29px, 8vw, 38px); }
  .miniapp-heading p { font-size: 14px; }
  .feature-list { margin-top: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .feature-list li { min-height: 58px; }
  .feature-list li::after { display: none; }
  .flow-visual { min-height: 56px; height: 56px; }
  .flow-rail { top: 14px; right: 25%; left: 25%; }
  .flow-signal { top: 10px; left: 25%; animation-name: signalTravelMobile; }
  .flow-hub { top: 6px; }
  .flow-stem { top: 20px; }
  .miniapp-cta { min-width: 210px; min-height: 54px; }
  .topic-grid { margin-top: 0; grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-grid li { min-height: 74px; }
  .topic-grid :is(button, a) { padding: 0 12px; grid-template-columns: 48px minmax(0, 1fr) 20px; }
  .topic-grid li:nth-child(4n + 1) :is(button, a),
  .topic-grid li:nth-child(4n) :is(button, a) { padding-right: 12px; padding-left: 12px; }
  .topic-grid li:nth-child(7) { grid-column: 1; }
  .topic-grid h2 { padding-left: 13px; font-size: 14px; white-space: normal; }
  .site-footer { margin-top: 34px; }
  .platform-row { padding: 18px 0; }
  .platform-list { grid-template-columns: repeat(4, 1fr); gap: 8px 0; }
  .platform-list li { min-height: 44px; border-right: 0; font-size: 11px; }
  .platform-list li > a,
  .platform-list li > button,
  .platform-list li:first-child > *,
  .platform-list li:last-child > * { min-height: 44px; padding: 0 6px; justify-content: flex-start; }
  .legal-row { padding: 0 0 18px; align-items: center; flex-direction: column; gap: 7px; text-align: center; }
  .record-links { justify-content: center; }
  .content-dialog { width: min(620px, calc(100vw - 28px)); }
}

@media (max-width: 560px) {
  :root { --shell: min(100% - 28px, 520px); }
  .brand small { display: none; }
  .header-miniapp img { display: none; }
  .hero-copy h1 { font-size: clamp(42px, 13vw, 58px); }
  .topic-grid { grid-template-columns: 1fr; }
  .topic-grid li,
  .topic-grid li:nth-child(7) { grid-column: auto; }
  .miniapp-panel { padding-right: 18px; padding-left: 18px; }
  .feature-list li { padding: 0 8px; }
  .feature-list img { width: 25px; height: 25px; }
  .feature-list strong { font-size: 14px; }
  .platform-list { grid-template-columns: repeat(3, 1fr); }
  .content-dialog {
    width: 100%;
    max-height: calc(100dvh - 34px);
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
  }
  .dialog-card { max-height: calc(100dvh - 34px); overflow-y: auto; padding: 32px 22px 26px; border-radius: 22px 22px 0 0; }
  .dialog-card h2 { margin-right: 48px; font-size: 28px; }
  .qr-dialog-card h2 { margin-right: 0; }
  .topic-details > div { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; }
  .qr-frame { min-height: min(300px, calc(100vw - 72px)); }
  .toast { right: 18px; bottom: 18px; left: 18px; text-align: center; }
}

@keyframes signalTravelMobile {
  0%, 4% { left: 25%; opacity: 0; }
  10%, 24% { left: 25%; opacity: 1; }
  45%, 58% { left: 50%; opacity: 1; }
  75%, 90% { left: 75%; opacity: 1; }
  100% { left: 75%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .feature-list li { border-color: rgba(106, 113, 122, .34); box-shadow: none; transform: none; }
  .flow-signal { display: none; }
}

.home-content-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 26px; font-size: 1rem; color: var(--accent-dark); }
.home-content-links a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 5px; }
.miniapp-details { display: inline-block; margin-top: 12px; font-size: .9375rem; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 4px; }
/* The topic dialog points to the growing resource directory. */
.inline-resource-link { display: inline-block; margin: 12px 0 22px; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 4px; }