body.tack-refs-open { overflow: hidden; }
.tack-refs-frame.is-loading { background: linear-gradient(100deg, #242622 25%, #33362f 45%, #242622 65%); background-size: 240% 100%; animation: tack-refs-loading 1.5s ease-in-out infinite; }
@keyframes tack-refs-loading { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .tack-refs-frame.is-loading { animation: none; background: #292c26; } }
.tack-refs-grid + .tack-refs-retry { margin-top: 20px; }
.tack-refs-button { font: 500 12px 'DM Sans', sans-serif; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 100px; padding: 9px 18px; cursor: pointer; }
.tack-refs-button:hover { background: rgba(255,255,255,.2); }
.tack-refs-button[hidden], .tack-refs-overlay[hidden], .tack-refs-overlay [hidden] { display: none !important; }
.tack-refs-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 28px; background: rgba(8,9,10,.78); font: 14px/1.5 'DM Sans', sans-serif; color: #f3f1eb; text-align: left; }
.tack-refs-overlay * { box-sizing: border-box; }
.tack-refs-dialog { width: min(1100px, 100%); max-height: 90dvh; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); border: 1px solid #3a3935; border-radius: 24px; overflow: hidden; box-shadow: 0 32px 100px #0008; background: #191a18; }
.tack-refs-result { min-width: 0; background: #10110f; padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.tack-refs-eyebrow { display: block; font: 500 10px/1.5 'DM Sans', sans-serif; letter-spacing: .12em; color: #a4a79d; }
.tack-refs-output { width: 100%; min-height: 0; max-height: 59dvh; object-fit: contain; border-radius: 14px; }
.tack-refs-prompt { margin: 0; font-size: 14px; line-height: 1.5; color: #bfc1b8; max-height: 84px; overflow: auto; }
.tack-refs-detail { padding: 30px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.tack-refs-detail header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.tack-refs-detail h2 { color: #f3f1eb; font: 400 36px/1.1 'Cormorant Garamond', Georgia, serif; margin: 8px 0 0; }
.tack-refs-close { flex-shrink: 0; display: grid; place-items: center; border: 1px solid #41443c; width: 34px; height: 34px; background: transparent; border-radius: 50%; color: #ddd; cursor: pointer; }
.tack-refs-content { margin-top: 28px; }
.tack-refs-state { color: #b3b7a9; font-size: 13px; line-height: 1.6; }
.tack-refs-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 14px; }
.tack-refs-frame { width: 100%; aspect-ratio: 1; background: #242622; display: grid; place-items: center; border-radius: 12px; overflow: hidden; color: #b3b7a9; font-size: 12px; padding: 0; border: 0; cursor: zoom-in; }
.tack-refs-frame:disabled { cursor: default; }
.tack-refs-frame:not(:disabled):hover { box-shadow: 0 0 0 2px #ffffff80; }
.tack-refs-frame img { width: 100%; height: 100%; object-fit: contain; }
.tack-refs-overlay a { color: #fff; font-size: 12px; text-decoration: none; }
.tack-refs-card a, .tack-refs-source-unavailable { display: inline-block; margin-top: 9px; }
.tack-refs-source-unavailable { color: #999d92; font-size: 12px; }
.tack-refs-overlay a:hover { text-decoration: underline; }
.tack-refs-zoom { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px; min-height: 0; }
.tack-refs-zoom header { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.tack-refs-back { border: 0; background: transparent; color: #fff; font: 500 13px 'DM Sans', sans-serif; padding: 8px 0; cursor: pointer; }
.tack-refs-full-image { max-width: 100%; width: auto; min-height: 0; max-height: calc(90dvh - 166px); object-fit: contain; border-radius: 12px; }
.tack-refs-download { display: inline-block; border: 1px solid #ffffff40; border-radius: 99px; padding: 10px 20px; background: #ffffff10; }
.tack-refs-retry { border: 1px solid #656e50; padding: 8px 16px; border-radius: 99px; background: #2f3726; color: #e8efd9; cursor: pointer; }
.tack-refs-overlay :focus-visible { outline: 2px solid #ccddaa; outline-offset: 4px; }
@media (max-width: 680px) {
  .tack-refs-overlay { padding: 12px; }
  .tack-refs-dialog { grid-template-columns: 1fr; overflow-y: auto; max-height: calc(100dvh - 24px); border-radius: 18px; }
  .tack-refs-result { padding: 22px; gap: 12px; }
  .tack-refs-output { max-height: 26dvh; }
  .tack-refs-detail { padding: 24px; overflow: visible; }
  .tack-refs-close { position: absolute; top: 24px; right: 24px; background: #191a18; }
  .tack-refs-zoom { padding: 20px; }
  .tack-refs-zoom .tack-refs-close { position: static; }
  .tack-refs-full-image { max-height: calc(100dvh - 190px); }
}

.tack-refs-overlay { color-scheme: dark; }
.tack-refs-dialog, .tack-refs-detail { scrollbar-width: thin; scrollbar-color: #505547 #191a18; }
#lightbox > div:last-child { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 32px); }
@media (max-width: 680px) { #lightbox .lightbox-meta { flex-basis: 100%; text-align: center; } }