#svg-discovery-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(6px);
}
.svg-discovery-card {
    display: flex;
    flex-direction: column;
    width: 480px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    border-radius: 20px;
    background: var(--bg-primary, #fff);
    box-shadow: 0 32px 80px rgba(15, 23, 42, .18);
    animation: svgModalIn .3s ease-out;
}
.svg-discovery-preview {
    position: relative;
    flex: 0 0 auto;
    height: clamp(166px, 31vh, 264px);
    overflow: hidden;
    background: radial-gradient(ellipse at 65% 25%, #e6e9ff 0%, transparent 65%), linear-gradient(145deg, #f3f5fc, #edf4f3);
}
.svg-discovery-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(100,116,139,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(100,116,139,.055) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse, #000, transparent 75%);
}
.svg-discovery-map {
    position: absolute;
    inset: 18px 20px 28px;
}
.svg-discovery-viewport {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
}
.svg-discovery-stack {
    position: relative;
    width: 720px;
    height: 560px;
    margin: -280px 0 0 -360px;
    transform-style: preserve-3d;
    transform: rotateX(55deg) rotateZ(-45deg);
}
.svg-discovery-plane {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 10px;
    transform: translateZ(var(--discovery-z));
}
.svg-discovery-plane::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #dce2ed;
    border-radius: inherit;
    background: #fff;
}
.svg-discovery-plane svg { position: relative; display: block; width: 100%; height: 100%; }
.svg-discovery-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.svg-discovery-preview[data-ready="true"] .svg-discovery-stack {
    animation: discovery-stack 7.2s cubic-bezier(.4, 0, .2, 1) infinite both;
}
.svg-discovery-preview[data-ready="true"] .svg-discovery-plane {
    animation: discovery-plane 7.2s cubic-bezier(.4, 0, .2, 1) infinite both;
    animation-delay: var(--discovery-delay);
}
.svg-discovery-preview[data-ready="true"] .svg-discovery-plane:not(:first-child)::before {
    animation: discovery-surface 7.2s cubic-bezier(.4, 0, .2, 1) infinite both;
    animation-delay: var(--discovery-delay);
}
.svg-discovery-preview:not(.is-playing) .svg-discovery-stack,
.svg-discovery-preview:not(.is-playing) .svg-discovery-plane,
.svg-discovery-preview:not(.is-playing) .svg-discovery-plane::before { animation-play-state: paused; }
.svg-discovery-playback {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    color: #64748b;
    cursor: pointer;
}
.svg-discovery-playback[hidden] { display: none; }
.svg-discovery-playback svg { width: 15px; height: 15px; fill: currentColor; }
.svg-discovery-playback .discovery-play { display: none; }
.svg-discovery-playback[aria-pressed="true"] .discovery-play { display: block; }
.svg-discovery-playback[aria-pressed="true"] .discovery-pause { display: none; }
.svg-discovery-source {
    position: absolute;
    bottom: 9px;
    left: 16px;
    right: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 8px;
    font-size: .57rem;
    color: #64748b;
}
.svg-discovery-source a { color: inherit; text-decoration: none; }
.svg-discovery-source a:hover { text-decoration: underline; }
.svg-discovery-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 8px;
    text-align: center;
    font-size: .8rem;
    color: #64748b;
}
.svg-discovery-loading[hidden] { display: none; }
.svg-discovery-loading span:first-child { font-size: 1.4rem; color: #6366f1; }
.svg-discovery-content { min-height: 0; overflow-y: auto; padding: 1.15rem 2rem 0; text-align: center; }
.svg-discovery-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .65rem;
    padding: .3rem .75rem;
    border: 1px solid rgba(16,185,129,.2);
    border-radius: 99px;
    background: #f0fdf4;
    color: #059669;
    font-size: .75rem;
    font-weight: 600;
}
.svg-discovery-content h2 { margin: 0 0 .5rem; font-size: 1.35rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--text-primary, #0f172a); }
.svg-discovery-content p { margin: 0 0 1rem; font-size: .85rem; line-height: 1.55; color: var(--text-muted, #64748b); }
.svg-discovery-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.svg-discovery-legend span { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .45rem; border-radius: 6px; font-size: .67rem; font-weight: 500; background: #f5f6fa; color: #475569; }
.svg-discovery-legend span::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--layer-color); }
.svg-discovery-actions { flex: 0 0 auto; padding: 1rem 2rem 1.15rem; text-align: center; }
.svg-discovery-actions button { width: 100%; min-height: 44px; border: none; font-family: inherit; cursor: pointer; }
.svg-discovery-try { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem; border-radius: 12px; font-size: .92rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 4px 16px rgba(99,102,241,.25); }
.svg-discovery-dismiss { margin-top: .25rem; padding: .6rem; border-radius: 8px; background: transparent; color: #64748b; font-size: .8rem; }
.svg-discovery-actions button:hover { filter: brightness(.97); }
#svg-discovery-modal :focus-visible { outline: 3px solid #818cf8; outline-offset: 3px; }
@keyframes discovery-stack {
    0%, 14%, 88%, 100% { transform: rotateX(0deg) rotateZ(0deg) scale(1.65); }
    28%, 72% { transform: rotateX(55deg) rotateZ(-45deg) scale(1); }
}
@keyframes discovery-plane {
    0%, 20%, 86%, 100% { transform: translateZ(0); }
    36%, 68% { transform: translateZ(var(--discovery-z)); }
}
@keyframes discovery-surface {
    0%, 20%, 86%, 100% { opacity: 0; }
    36%, 68% { opacity: 1; }
}
@media (max-width: 380px) {
    .svg-discovery-content { padding-right: 1rem; padding-left: 1rem; }
    .svg-discovery-content h2 { font-size: 1.2rem; }
    .svg-discovery-actions { padding-right: 1rem; padding-left: 1rem; }
}
@media (max-height: 650px) {
    .svg-discovery-preview { height: 148px; }
    .svg-discovery-content { padding-top: .8rem; }
    .svg-discovery-badge { margin-bottom: .4rem; padding: .2rem .65rem; }
    .svg-discovery-content p { margin-bottom: .65rem; }
    .svg-discovery-actions { padding-top: .65rem; padding-bottom: .65rem; }
}
@media (max-height: 650px) and (orientation: portrait) {
    .svg-discovery-preview { height: clamp(180px, 36vh, 220px); }
}
@media (prefers-reduced-motion: reduce) {
    .svg-discovery-card { animation: none; }
    .svg-discovery-preview[data-ready="true"] .svg-discovery-stack,
    .svg-discovery-preview[data-ready="true"] .svg-discovery-plane,
    .svg-discovery-preview[data-ready="true"] .svg-discovery-plane::before { animation: none; }
    .svg-discovery-playback { display: none; }
}