@layer components {
  .ad-space { container-type: inline-size; }
  .ad-space:has(.advertisement:not([hidden])) { margin: 32px 0; }
  .advertisement { max-width: 100%; padding: 18px 0; border-block: 1px solid var(--line); }
  .advertisement-label { margin: 0 0 12px; text-align: center; color: var(--muted); font: 600 9px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .15em; }
  .ad-creative { max-width: 100%; margin-inline: auto; }
  .ad-creative iframe { display: block; border: 0; margin-inline: auto; max-width: none; }
  [data-ad-size='300x250'] .ad-creative { width: 300px; min-height: 250px; }
  [data-ad-size='320x50'] .ad-creative { width: 320px; min-height: 50px; }
  [data-ad-size='728x90'] .ad-creative { width: 728px; min-height: 90px; }
  [data-ad-size='native'] .ad-creative { min-height: 180px; }
  [data-ad-state='preview'] .ad-creative { display: grid; place-items: center; outline: 1px dashed var(--gold); color: var(--muted); font-size: 12px; }
  .advertising-settings { max-width: min(480px, calc(100vw - 32px)); padding: 28px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
  .advertising-settings::backdrop { background: #0009; }
  .advertising-settings h2 { font: 400 28px/1.2 var(--serif); margin-bottom: 18px; }
  .advertising-settings p { margin-bottom: 18px; font-size: 13px; }
  .advertising-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .advertising-actions button { padding: 8px 14px; background: var(--raised); border: 1px solid var(--gold); }
  .advertising-actions button:disabled { opacity: .5; cursor: default; }
  .ad-settings-close { float: right; border: 0; background: none; font-size: 22px; padding: 0 0 8px 16px; }
}
@layer responsive {
  @container (max-width: 727px) { [data-ad-size='728x90'] { display: none; } }
  @container (max-width: 319px) { [data-ad-size='320x50'], [data-ad-size='native'] { display: none; } }
  @container (max-width: 299px) { [data-ad-size='300x250'] { display: none; } }
  @media (max-width: 760px) { [data-ad-size='native'] { display: none; } }
  @media print { .ad-space, [data-ad-settings], .advertising-settings { display: none !important; } }
}