:root {
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  color: #111a2c;
  background: #f5f7fb;
  --muted: #56647a;
  --blue: #005ac7;
  --edge: #e0e7f2;
  --page-width: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid #1575e8;
  outline-offset: 4px;
}

.shell {
  width: min(calc(100% - 72px), var(--page-width));
  margin-inline: auto;
}

.site-header {
  background: #fff;
  border-bottom: 1px solid #e8edf5;
}

.header-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand, .website-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.brand {
  color: #152539;
  font-weight: 750;
  letter-spacing: .04em;
  white-space: nowrap;
}

.brand img { width: 31px; height: 30px; object-fit: contain; }

.website-link {
  min-height: 44px;
  color: #44536b;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.website-link:hover { color: var(--blue); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 6vw, 80px) 0 clamp(41px, 5vw, 66px);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 90%, #e7f1ff 0%, #f5faff 47%, transparent 74%),
    linear-gradient(#fff 0%, #fff 55%, #f5f7fb 100%);
}

.hero::before, .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset-inline-start: 50%;
  border: 1px solid #c5d9f3;
  border-radius: 50%;
  opacity: .68;
  transform: translateX(-50%) rotate(-7deg);
  mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 69%, #000);
}

.hero::before { inset-block-start: 37%; width: 1210px; height: 290px; }
.hero::after { inset-block-start: 43%; width: 1080px; height: 249px; }

.hero h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5.25vw, 4.35rem);
  font-weight: 770;
  line-height: 1.1;
  letter-spacing: -.065em;
}

.hero h1 span { color: #005abc; }

.hero p {
  max-width: 34em;
  margin: 18px auto 0;
  color: #495974;
  font-size: clamp(.96rem, 1.8vw, 1.15rem);
  line-height: 1.65;
  text-wrap: balance;
}

.hero .hero-guide {
  margin-top: 7px;
  color: var(--muted);
  font-size: .925rem;
}

.channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding-block: 0 42px;
}

.channel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  min-height: 216px;
  padding: clamp(20px, 2.8vw, 30px);
  border: 1px solid var(--edge);
  border-radius: 28px;
  background-color: #fff;
  background-image: linear-gradient(90deg, #fff0, #fff 48%);
  box-shadow: 0 6px 18px #20395608, 0 1px 2px #20395606;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.channel:hover, .channel:focus-within {
  border-color: #adc9ef;
  background-color: #f0f6ff;
  box-shadow: 0 14px 30px #24477311;
}

.channel-actions .pill span {
  transition: transform .18s ease;
}

.channel:hover .channel-actions .pill span,
.channel:focus-within .channel-actions .pill span {
  transform: translate(2px, -1px);
}

.channel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: clamp(1.32rem, 2vw, 1.65rem);
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -.035em;
}

.channel-logo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 22.5%;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 1px 2px #17243a18, 0 4px 9px #17243a10;
}

.channel-description {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}

.identifier { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.channel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 9px;
  margin-top: 14px;
}

.pill, .copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  font-size: .85rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pill {
  border: 0;
  border-radius: 999px;
  padding: 0 15px;
  background: #eaf3ff;
  color: #0051b6;
  transition: background-color .18s ease, color .18s ease;
}

.pill:hover { background: #0862cd; color: #fff; }

.copy-button {
  border: 0;
  padding: 0 5px;
  background: transparent;
  color: #4c607a;
}

.copy-button:hover { color: var(--blue); text-decoration: underline; }

.qr-button {
  --size: clamp(112px, 13vw, 152px);
  position: relative;
  display: block;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.qr-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qr-expand {
  position: absolute;
  right: -10px;
  bottom: -10px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid #dce8f9;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  font-size: 1rem;
  line-height: 1;
}

.qr-button:hover .qr-expand { background: #eaf3ff; }

.site-footer {
  padding: 17px 0 26px;
  border-top: 1px solid var(--edge);
  color: #57667b;
  font-size: .8rem;
  text-align: center;
}

.qr-dialog {
  width: min(390px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: 25px;
  border: 1px solid #e4eaf3;
  border-radius: 28px;
  color: inherit;
  background: #fff;
  box-shadow: 0 26px 80px #1327463d;
  text-align: center;
}

.qr-dialog::backdrop {
  background: #17243c69;
  backdrop-filter: blur(5px);
}

.qr-dialog h2 { margin: 0; font-size: 1.4rem; line-height: 1.4; }
.qr-dialog p { margin: 5px 0 11px; color: var(--muted); font-size: .875rem; }
.qr-dialog img { width: min(100%, 290px); height: auto; margin: 10px auto; border-radius: 16px; }
.qr-dialog .pill { margin-top: 3px; }

.dialog-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -13px -13px -15px auto;
  border: 0;
  border-radius: 50%;
  background: #f1f5fa;
  color: #394c63;
  font-size: 1.32rem;
  cursor: pointer;
}

.dialog-close:hover { background: #e5edf7; }

.notice {
  position: fixed;
  z-index: 2;
  inset-inline-start: 50%;
  inset-block-end: 22px;
  width: max-content;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  padding: 11px 17px;
  border-radius: 999px;
  background: #17263c;
  color: #fff;
  font-size: .875rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.notice[data-visible] { opacity: 1; }

@media (max-width: 760px) {
  .shell { width: min(calc(100% - 40px), 530px); }
  .header-inner { min-height: 59px; }
  .hero::before, .hero::after { opacity: .4; }
  .hero::before { width: 800px; }
  .hero::after { width: 710px; }
  .channels { grid-template-columns: 1fr; gap: 12px; padding-bottom: 27px; }
  .channel { min-height: 160px; border-radius: 23px; }
  .channel-logo { width: 42px; height: 42px; }
  .qr-button { --size: clamp(104px, 30vw, 134px); }
}

@media (max-width: 375px) {
  .shell { width: calc(100% - 28px); }
  .channel { padding: 15px; }
  .channel h2 { gap: 6px; }
  .channel-logo { width: 34px; height: 34px; }
  .channel-description { font-size: .82rem; }
  .channel-actions { gap: 0 4px; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}