.sp-dialog { width: min(860px, calc(100vw - 36px)); max-height: calc(100dvh - 36px); margin: auto; padding: 0; border: 1px solid var(--rule); border-radius: 22px; background: var(--night); overflow: auto; }
.sp-dialog::backdrop { background: #060d0ada; backdrop-filter: blur(7px); }
.sp-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; }
.sp-heading > div > span { display: block; margin-bottom: 6px; font: 9px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.sp-heading h2 { margin: 0; font-size: 26px; font-weight: 550; letter-spacing: -.04em; line-height: 1.2; }
.sp-close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border: 1px solid var(--rule); border-radius: 10px; color: var(--paper); background: transparent; }
.sp-close:hover { background: var(--mint); color: var(--ink); }
.sp-example { margin: 0; }
.sp-example > img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 230px); object-fit: contain; background: #16162a; }
.sp-example figcaption { display: flex; align-items: center; gap: 16px; padding: 20px 24px; color: var(--ink); background: var(--lavender); }
.sp-example p { margin: 0; font-size: 17px; line-height: 1.45; letter-spacing: -.02em; }
.sp-example a { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; padding: 9px 12px; border: 1px solid #788272; border-radius: 9px; font-size: 11px; }
.sp-example a:hover { background: var(--ink); color: var(--paper); }
.sp-example a:focus-visible { outline-color: var(--ink); }
@media (max-width: 600px) {
  .sp-dialog { width: calc(100vw - 24px); max-width: none; border-radius: 16px; }
  .sp-heading { padding: 18px; }
  .sp-heading h2 { font-size: 23px; }
  .sp-example figcaption { flex-wrap: wrap; align-items: baseline; padding: 18px; gap: 10px; }
  .sp-example p { font-size: 16px; }
  .sp-example a { margin: 3px 0 0; }
}