.cross-app-ads{--ca-ink:#17242b;--ca-muted:#53636b;--ca-bg:#f7fafb;--ca-line:#c7d6dc;--ca-accent:#146a78;box-sizing:border-box;width:100%;clear:both;margin:32px 0;border-block:1px solid var(--ca-line);color:var(--ca-ink);background:var(--ca-bg);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;line-height:1.6;isolation:isolate}.cross-app-ads[data-host="sound-compass"]{color:inherit;background:transparent}.cross-app-ads *{box-sizing:border-box}.cross-app-inner{max-width:1140px;margin:auto;padding:28px 24px}.cross-app-kicker{margin:0 0 4px;color:var(--ca-muted);font-size:13px}.cross-app-title{margin:0 0 18px;font-size:clamp(20px,2.4vw,28px)}.cross-app-general-frame{min-height:250px;display:grid;place-items:center;border:1px solid var(--ca-line);background:#fff}.cross-app-ad-pending,.cross-app-privacy{max-width:760px;margin:0;padding:18px;color:var(--ca-muted);font-size:13px}.cross-app-privacy{padding:12px 0 0}.cross-app-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.cross-app-card{min-width:0;padding:12px;border:1px solid var(--ca-line);background:#fff}.cross-app-visual-link{display:block}.cross-app-creative{display:block;width:100%;height:auto}.cross-app-link{display:block;margin-top:10px;color:var(--ca-accent);font-weight:700}.cross-app-status{display:block;margin-top:4px;color:var(--ca-muted)}.cross-app-choices{display:none;margin-bottom:12px}.cross-app-choices button{min-height:44px;margin:4px;padding:8px 14px;border:1px solid var(--ca-line);border-radius:4px;color:var(--ca-ink);background:transparent;font:inherit}.cross-app-choices button[aria-pressed="true"]{color:#fff;background:var(--ca-accent)}@media(max-width:680px){.cross-app-inner{padding:24px 16px}.cross-app-cards{display:block}.cross-app-card{display:none}.cross-app-card.is-selected{display:block}.cross-app-choices{display:flex;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.cross-app-ads *{scroll-behavior:auto!important;transition:none!important}}@media print{.cross-app-ads{display:none!important}}

/* Optional reciprocal-exchange placement; kept separate from house and AdSense units. */
.exchange-ads {
  --ad-ink: #151515;
  --ad-paper: #f4ecd3;
  --ad-muted: #625f56;
  box-sizing: border-box;
  width: min(1180px, calc(100% - 48px));
  clear: both;
  margin: clamp(42px, 7vw, 84px) auto;
  color: var(--ad-ink);
  background: transparent;
  font-family: inherit;
  line-height: 1.5;
  isolation: isolate;
}

.exchange-ads *,
.exchange-ads *::before,
.exchange-ads *::after {
  box-sizing: border-box;
}

.exchange-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--ad-ink);
  background: var(--ad-paper);
}

.exchange-label {
  position: absolute;
  top: 0;
  left: clamp(22px, 3vw, 36px);
  padding: 5px 10px;
  color: var(--ad-paper);
  background: var(--ad-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
}

.exchange-close {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  color: var(--ad-ink);
  background: transparent;
  font: 400 28px/1 inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.exchange-link {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.exchange-link.is-text-only {
  grid-template-columns: 1fr;
}

.exchange-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border: 1px solid var(--ad-ink);
  background: #fff;
}

.exchange-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding-right: 40px;
}

.exchange-copy small {
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.exchange-copy strong {
  max-width: 22ch;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.08;
  text-wrap: balance;
}

.exchange-copy span {
  max-width: 56ch;
  color: var(--ad-muted);
}

.exchange-copy b {
  width: fit-content;
  margin-top: 5px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
}

.exchange-link:hover .exchange-copy b {
  border-bottom-width: 3px;
}

.exchange-link:focus-visible .exchange-image {
  outline: 3px solid #1473e6;
  outline-offset: 4px;
}

.exchange-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: -12px;
}

.exchange-actions button {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--ad-muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}

.exchange-actions button:hover {
  color: var(--ad-ink);
  border-bottom-color: currentColor;
}

.exchange-close:focus-visible,
.exchange-actions button:focus-visible {
  outline: 3px solid #1473e6;
  outline-offset: 3px;
}

.exchange-reason {
  grid-column: 2;
  max-width: 60ch;
  color: var(--ad-muted);
  font-size: 12px;
}

.exchange-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 680px) {
  .exchange-ads {
    width: min(100% - 28px, 520px);
    margin-block: 44px;
  }

  .exchange-inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 18px 20px;
  }

  .exchange-copy {
    padding-right: 28px;
  }

  .exchange-link {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .exchange-actions,
  .exchange-reason {
    grid-column: 1;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .exchange-ads * {
    scroll-behavior: auto !important;
  }
}

@media print {
  .exchange-ads {
    display: none !important;
  }
}

/* PikoBop keeps the site's monochrome editorial system and clear animal space. */
.cross-app-ads[data-host="pikobop"] {
  --ca-ink: var(--ink, #090909);
  --ca-muted: var(--quiet, #666);
  --ca-bg: var(--canvas, #fff);
  --ca-line: var(--rule, #d7d7d7);
  --ca-accent: var(--ink, #090909);
  width: min(1440px, calc(100% - 96px));
  margin: 0 auto;
  border-block: 1px solid var(--ink, #090909);
  background: var(--canvas, #fff);
  font-family: var(--display, system-ui, sans-serif);
}

.cross-app-ads[data-host="pikobop"] .cross-app-inner {
  max-width: none;
  padding: clamp(48px, 7vw, 92px) 0;
}

.cross-app-ads[data-host="pikobop"] .cross-app-kicker {
  font: 800 12px/1.2 var(--utility, system-ui, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cross-app-ads[data-host="pikobop"] .cross-app-title {
  max-width: 18ch;
  margin-bottom: 28px;
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.cross-app-ads[data-host="pikobop"] .cross-app-general-frame,
.cross-app-ads[data-host="pikobop"] .cross-app-card {
  border-color: var(--ink, #090909);
  background: var(--canvas, #fff);
}

.cross-app-ads[data-host="pikobop"] .cross-app-general-frame { min-height: 184px; }
.cross-app-ads[data-host="pikobop"] .cross-app-cards { grid-template-columns: repeat(2, minmax(0, 520px)); }
.cross-app-ads[data-host="pikobop"] .cross-app-link {
  color: var(--ink, #090909);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

@media (max-width: 680px) {
  .cross-app-ads[data-host="pikobop"] { width: calc(100% - 40px); }
  .cross-app-ads[data-host="pikobop"] .cross-app-inner { padding: 44px 0; }
  .cross-app-ads[data-host="pikobop"] .cross-app-link {
    display: flex;
    min-height: 44px;
    align-items: center;
  }
}

/* Reuse the pending AdSense frame without adding a second exchange placement. */
.cross-app-general[hidden]{display:none!important}
.cross-app-general-frame[data-ad-mode="exchange"]{min-height:0;display:block;border:0;background:transparent}
.cross-app-general-frame[data-ad-mode="exchange"]>.exchange-ads{width:100%;margin:0}
.cross-app-general-fallback{display:block;width:min(100%,600px);margin:auto}
.cross-app-general-fallback img{display:block;width:100%;height:auto}
.cross-app-general-fallback:focus-visible{outline:3px solid var(--ca-accent);outline-offset:4px}