.pdna {
    --pdna-box: clamp(48px, 13.5vw, 92px);
    --pdna-ink: var(--color-text-soft);
    --pdna-soft: var(--color-muted);
    --pdna-edge: var(--color-border-strong);
    --pdna-fill: var(--color-surface);
    --pdna-fill-2: var(--color-surface-2);
    overflow: hidden;
}

.pdna__head {
    max-width: 640px;
    margin: 0 auto var(--space-6);
    text-align: center;
}

.pdna__title {
    margin: var(--space-2) 0 var(--space-3);
    font-size: clamp(22px, 4vw, 34px);
    line-height: 1.2;
}

.pdna__lead {
    margin: 0;
    color: var(--color-text-soft);
    font-size: clamp(13px, 2.4vw, 16px);
}

.pdna__belt {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(3px, 1.2vw, 12px);
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding-block: var(--space-4);
}

.pdna__st {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(5px, 1.3vw, 8px);
    min-width: 0;
    width: var(--pdna-box);
}

.pdna__st--net {
    width: clamp(66px, 18.5vw, 132px);
}

.pdna__box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pdna-box);
    height: var(--pdna-box);
    border: 1px solid var(--color-border);
    border-radius: clamp(12px, 3.4vw, 22px);
    background: var(--color-elevated);
    box-shadow: var(--shadow-sm);
}

.pdna__cap {
    width: max-content;
    max-width: clamp(78px, 21vw, 150px);
    margin-inline: auto;
    font-size: clamp(9px, 2.2vw, 12px);
    line-height: 1.3;
    text-align: center;
    color: var(--pdna-ink);
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}

.pdna__cap--core {
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text);
}

.pdna__stack {
    overflow: hidden;
}

.pdna__card {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66%;
    height: 58%;
    border-radius: 13%;
    border: 1px solid var(--color-border);
    background: var(--color-elevated);
    color: var(--pdna-ink);
    box-shadow: var(--shadow-xs);
}

.pdna__card-ic {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42%;
    height: 42%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(12, 16, 15, 0.42);
    color: #ffffff;
}

.pdna__card-ic svg {
    width: 58%;
    height: 58%;
}

.pdna__card--3 {
    transform: translate(-50%, -50%) rotate(-11deg) translateY(-6%);
    background: var(--pdna-fill);
    color: var(--pdna-soft);
}

.pdna__card--2 {
    transform: translate(-50%, -50%) rotate(6deg) translateY(-2%);
    background: var(--pdna-fill);
}

.pdna__card--1 {
    transform: translate(-50%, -50%) rotate(0deg);
    animation: pdna-card 7s ease-in-out infinite;
}

@keyframes pdna-card {
    0%, 58% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
    72% { transform: translate(-42%, -78%) rotate(7deg); opacity: 0; }
    73% { transform: translate(-50%, -30%) rotate(-4deg); opacity: 0; }
    86%, 100% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
}

.pdna__link {
    position: relative;
    flex: 1 1 auto;
    min-width: clamp(30px, 9vw, 170px);
    height: var(--pdna-box);
}

.pdna__rail {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
    background: var(--color-border-strong);
    opacity: .7;
}

.pdna__ticks {
    position: absolute;
    top: calc(50% + 4px);
    left: 0;
    width: 100%;
    height: 4px;
    background-image: linear-gradient(90deg, var(--color-border-strong) 0 1px, transparent 1px 100%);
    background-size: 8px 100%;
    opacity: .5;
}

.pdna__stream {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    border-radius: var(--radius-pill);
    background-image: linear-gradient(90deg, transparent 0 40%, var(--pdna-ink) 40% 58%, transparent 58% 100%);
    background-size: 34% 100%;
    background-repeat: repeat-x;
    opacity: .55;
    animation: pdna-stream 2.188s linear infinite;
}

.pdna__stream--hash {
    background-image: linear-gradient(90deg, transparent 0 46%, var(--pdna-ink) 46% 56%, transparent 56% 100%);
    background-size: 22% 100%;
    animation-duration: 1.75s;
}

@keyframes pdna-stream {
    from { background-position: 0 0; }
    to { background-position: 34% 0; }
}

.pdna__wire-lbl {
    position: absolute;
    left: 50%;
    bottom: calc(50% + clamp(15px, 4.4vw, 24px));
    transform: translateX(-50%);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(6px, 1.5vw, 9px);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pdna-soft);
    opacity: .6;
    white-space: nowrap;
}

.pdna__pkt,
.pdna__hash {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    animation: pdna-travel 7s linear infinite;
}

.pdna__pkt {
    width: clamp(15px, 4.2vw, 24px);
    height: clamp(15px, 4.2vw, 24px);
    border-radius: 34%;
    border: 1px solid var(--color-border);
    background: var(--color-elevated);
    color: var(--pdna-ink);
    box-shadow: var(--shadow-xs);
}

.pdna__pkt svg {
    width: 58%;
    height: 58%;
}

.pdna__pkt--1 { animation-delay: 0s; }
.pdna__pkt--2 { animation-delay: -1.167s; }
.pdna__pkt--3 { animation-delay: -2.333s; }
.pdna__pkt--4 { animation-delay: -3.5s; }
.pdna__pkt--5 { animation-delay: -4.667s; }
.pdna__pkt--6 { animation-delay: -5.833s; }

.pdna__hash {
    padding: 2px clamp(3px, 1vw, 6px);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-elevated);
    color: var(--pdna-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(6px, 1.6vw, 9px);
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
}

.pdna__hash--1 { animation-delay: 0s; }
.pdna__hash--2 { animation-delay: -2.333s; }
.pdna__hash--3 { animation-delay: -4.667s; }

@keyframes pdna-travel {
    0% { left: 0; opacity: 0; }
    7% { opacity: 1; }
    93% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

.pdna__core {
    overflow: hidden;
    border-color: var(--color-border-strong);
}

.pdna__mesh {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, var(--color-border) 0 1px, transparent 1px 100%), linear-gradient(0deg, var(--color-border) 0 1px, transparent 1px 100%);
    background-size: 22% 22%;
    opacity: .4;
}

.pdna__corner {
    position: absolute;
    width: 15%;
    height: 15%;
    border: 1.5px solid var(--pdna-edge);
    opacity: .8;
}

.pdna__corner--tl { top: 7%; left: 7%; border-right: 0; border-bottom: 0; }
.pdna__corner--tr { top: 7%; right: 7%; border-left: 0; border-bottom: 0; }
.pdna__corner--bl { bottom: 7%; left: 7%; border-right: 0; border-top: 0; }
.pdna__corner--br { bottom: 7%; right: 7%; border-left: 0; border-top: 0; }

.pdna__shot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62%;
    height: 62%;
    border-radius: 14%;
    border: 1px solid var(--color-border);
    background: var(--pdna-fill);
    color: var(--pdna-ink);
    animation: pdna-shot 2.8s linear infinite;
}

.pdna__shot svg {
    width: 52%;
    height: 52%;
}

.pdna__px {
    position: absolute;
    top: 19%;
    left: 19%;
    width: 62%;
    height: 62%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 3%;
    opacity: 0;
    animation: pdna-px 2.8s linear infinite;
}

.pdna__px i {
    display: block;
    border-radius: 1px;
    background-image: var(--pdna-src);
    background-size: 400% 400%;
    background-repeat: no-repeat;
    opacity: .6;
    animation: pdna-cell 2.8s steps(1, end) infinite;
}

.pdna__px i:nth-child(5n+1) { animation-delay: -0.2s; }
.pdna__px i:nth-child(5n+2) { animation-delay: -0.4s; }
.pdna__px i:nth-child(5n+3) { animation-delay: -0.622s; }
.pdna__px i:nth-child(5n+4) { animation-delay: -0.824s; }

.pdna__out {
    position: absolute;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(7px, 1.9vw, 11px);
    letter-spacing: .02em;
    color: var(--color-text);
    white-space: nowrap;
    opacity: 0;
    animation: pdna-out 2.8s linear infinite;
}

@keyframes pdna-shot {
    0%, 8% { opacity: 1; transform: scale(1); }
    17% { opacity: 0; transform: scale(.9); }
    90% { opacity: 0; transform: scale(.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes pdna-px {
    0%, 10% { opacity: 0; }
    17% { opacity: 1; }
    52% { opacity: 1; }
    60%, 100% { opacity: 0; }
}

@keyframes pdna-cell {
    0% { opacity: .58; }
    14% { opacity: 1; }
    26% { opacity: .64; }
    38% { opacity: .92; }
    50% { opacity: .7; }
    62% { opacity: 1; }
    76%, 100% { opacity: .58; }
}

@keyframes pdna-out {
    0%, 54% { opacity: 0; }
    61% { opacity: 1; }
    90% { opacity: 1; }
    96%, 100% { opacity: 0; }
}


.pdna__scan {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 26%;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pdna-edge) 55%, transparent));
    border-bottom: 1px solid var(--pdna-edge);
    animation: pdna-scan 2.692s linear infinite;
}

@keyframes pdna-scan {
    0% { transform: translateY(-100%); opacity: 0; }
    12% { opacity: .9; }
    88% { opacity: .9; }
    100% { transform: translateY(385%); opacity: 0; }
}

.pdna__card img,
.pdna__pkt img,
.pdna__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.pdna__ok {
    position: absolute;
    right: -14%;
    bottom: -14%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44%;
    height: 44%;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    transform: scale(0);
    animation: pdna-ok 7s ease-out infinite;
}

.pdna__ok svg {
    width: 62%;
    height: 62%;
}

@keyframes pdna-ok {
    0%, 78% { transform: scale(0); }
    86% { transform: scale(1.15); }
    92% { transform: scale(1); }
    97%, 100% { transform: scale(0); }
}

.pdna__net {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7%;
    width: 100%;
    padding: 9%;
}

.pdna__net-ic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32%;
    background: var(--pdna-fill);
    border: 1px solid var(--color-border);
    aspect-ratio: 1;
    animation: pdna-net 7s linear infinite;
}

.pdna__net-ic img {
    width: 56%;
    height: 56%;
    filter: brightness(0);
}

[data-theme="dark"] .pdna__net-ic img {
    filter: brightness(0) invert(1);
}

.pdna__net-ic--1, .pdna__net-ic--1 .pdna__ok { animation-delay: -6.087s; }
.pdna__net-ic--2, .pdna__net-ic--2 .pdna__ok { animation-delay: -5.185s; }
.pdna__net-ic--3, .pdna__net-ic--3 .pdna__ok { animation-delay: -4.375s; }
.pdna__net-ic--4, .pdna__net-ic--4 .pdna__ok { animation-delay: -3.5s; }
.pdna__net-ic--5, .pdna__net-ic--5 .pdna__ok { animation-delay: -2.692s; }
.pdna__net-ic--6, .pdna__net-ic--6 .pdna__ok { animation-delay: -1.944s; }

@keyframes pdna-net {
    0%, 82% { border-color: var(--color-border); background-color: var(--pdna-fill); }
    88% { border-color: var(--pdna-edge); background-color: var(--pdna-fill-2); }
    94%, 100% { border-color: var(--color-border); background-color: var(--pdna-fill); }
}

.pdna__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(10px, 2.4vw, 20px);
    max-width: 920px;
    margin: var(--space-6) auto 0;
    padding: 0;
    list-style: none;
}

.pdna__step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.pdna__step-n {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: var(--weight-semibold, 600);
    color: var(--pdna-soft);
}

.pdna__step-t {
    font-size: clamp(12px, 2.2vw, 14px);
    line-height: 1.45;
    color: var(--color-text-soft);
    overflow-wrap: break-word;
}

.pdna__step--stop {
    border-top-color: var(--color-danger);
}

.pdna__step--stop .pdna__step-n {
    color: var(--color-danger);
}

[data-theme="dark"] .pdna__box {
    background: var(--color-surface);
}

[data-theme="dark"] .pdna__card,
[data-theme="dark"] .pdna__shot,
[data-theme="dark"] .pdna__pkt,
[data-theme="dark"] .pdna__hash {
    background: var(--color-surface-2);
}

[data-theme="dark"] .pdna__net-ic {
    background: var(--color-surface-2);
}

@media (max-width: 900px) {
    .pdna__hash--3 {
        display: none;
    }
}

@media (max-width: 640px) {
    .pdna {
        --pdna-box: clamp(62px, 17vw, 86px);
    }
    .pdna__belt {
        gap: 4px;
        padding-block: var(--space-3);
    }
    .pdna__st--net {
        width: clamp(80px, 22vw, 132px);
    }
    .pdna__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4) var(--space-3);
    }
    .pdna__step {
        gap: var(--space-2);
    }
    .pdna__wire-lbl,
    .pdna__ticks {
        display: none;
    }
    .pdna__hash--2,
    .pdna__hash--3,
    .pdna__pkt--2,
    .pdna__pkt--3,
    .pdna__pkt--5,
    .pdna__pkt--6 {
        display: none;
    }
    .pdna__pkt {
        width: clamp(22px, 6.2vw, 32px);
        height: clamp(22px, 6.2vw, 32px);
    }
    .pdna__hash {
        font-size: clamp(7px, 2.1vw, 10px);
        padding: 3px 6px;
    }
}