[data-hover-peek-url] {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    transition: color 180ms ease, text-decoration-color 180ms ease;
}

[data-hover-peek-url]:hover,
[data-hover-peek-url]:focus-visible {
    text-decoration-style: solid;
}

.hover-peek-card {
    --peek-x: 0px;
    --peek-y: 8px;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: min(340px, calc(100vw - 24px));
    height: 218px;
    overflow: hidden;
    color: #dcecff;
    border: 1px solid rgba(111, 157, 207, 0.34);
    border-radius: 16px;
    background: #08111f;
    box-shadow: 0 24px 64px rgba(0, 22, 50, 0.3), inset 0 1px rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(var(--peek-x), var(--peek-y), 0) scale(0.96) rotateX(2deg);
    transform-origin: center bottom;
    transition: opacity 180ms ease, visibility 180ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hover-peek-card.is-visible {
    --peek-y: 0px;
    opacity: 1;
    visibility: visible;
    transform: translate3d(var(--peek-x), var(--peek-y), 0) scale(1) rotateX(0deg);
}

.hover-peek-card__bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 13px;
    background: linear-gradient(180deg, rgba(22, 39, 63, 0.98), rgba(11, 24, 42, 0.94));
    border-bottom: 1px solid rgba(121, 162, 205, 0.2);
}

.hover-peek-card__status {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #62cdb8;
    box-shadow: 0 0 12px rgba(98, 205, 184, 0.72);
}

.hover-peek-card__meta {
    min-width: 0;
    flex: 1;
}

.hover-peek-card__title,
.hover-peek-card__host {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hover-peek-card__title {
    color: #f4f8ff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.hover-peek-card__host {
    color: #8fa8c5;
    font-size: 10px;
    line-height: 1.35;
}

.hover-peek-card__arrow {
    width: 15px;
    height: 15px;
    opacity: 0.75;
}

.hover-peek-card__viewport {
    position: relative;
    height: 176px;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 22%, rgba(44, 131, 189, 0.26), transparent 42%),
        linear-gradient(rgba(71, 116, 163, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(71, 116, 163, 0.1) 1px, transparent 1px),
        #091422;
    background-size: auto, 22px 22px, 22px 22px, auto;
}

.hover-peek-card__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 6px;
    color: #b9cee4;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.hover-peek-card__fallback strong {
    color: #e8f4ff;
    font-size: 18px;
}

.hover-peek-card iframe {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 1280px;
    min-width: 1280px;
    max-width: none;
    height: 720px;
    border: 0;
    background: transparent;
    transform: scale(0.265625);
    transform-origin: top left;
    opacity: 0;
    transition: opacity 220ms ease;
}

.hover-peek-card iframe.is-loaded {
    opacity: 1;
}

[data-theme="light"] .hover-peek-card {
    color: #183653;
    border-color: rgba(55, 108, 156, 0.26);
    background: #f5faff;
    box-shadow: 0 24px 60px rgba(43, 88, 125, 0.2), inset 0 1px #fff;
}

[data-theme="light"] .hover-peek-card__bar {
    background: linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(231, 243, 253, 0.96));
    border-bottom-color: rgba(55, 108, 156, 0.18);
}

[data-theme="light"] .hover-peek-card__title,
[data-theme="light"] .hover-peek-card__fallback strong {
    color: #163b5e;
}

[data-theme="light"] .hover-peek-card__host,
[data-theme="light"] .hover-peek-card__fallback {
    color: #587694;
}

[data-theme="light"] .hover-peek-card__viewport {
    background:
        radial-gradient(circle at 72% 22%, rgba(75, 157, 224, 0.24), transparent 42%),
        linear-gradient(rgba(86, 136, 181, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(86, 136, 181, 0.1) 1px, transparent 1px),
        #eef7ff;
    background-size: auto, 22px 22px, 22px 22px, auto;
}

@media (hover: none), (pointer: coarse) {
    .hover-peek-card {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hover-peek-card,
    .hover-peek-card iframe {
        transition: none;
    }
}