/* Artwork inherits the original hero's image boxes, rotations and breakpoints. */
@media (max-width: 809.98px) {
    .bs-satin-landing .ui-section-hero .ui-c156 .ui-c208 .ui-c306 > p.ui-c331 {
        --ui-text-alignment: center !important;
        text-align: center !important;
    }
}
.bs-satin-art { container-type: inline-size; }
.bs-satin-surface {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    color: #303a34;
    color-scheme: light;
    font-family: "Matter Regular", sans-serif;
    border: 1px solid #fff;
    border-radius: 6cqw;
    background: #fdfcfe;
    box-shadow: 0 1px 2px #433c4b0a, 0 6cqw 9cqw -6cqw #53466e49;
    overflow: hidden;
    animation: bs-satin-enter 600ms cubic-bezier(.22, 1, .36, 1) both;
}
.bs-satin-surface *, .bs-satin-surface *::before { box-sizing: border-box; }
.bs-satin-name, .bs-satin-found strong, .bs-satin-scan-heading, .bs-satin-metric, .bs-satin-progress-label { font-family: "Matter Medium", sans-serif; }
.bs-satin-scanning { animation-delay: 90ms; }
.bs-satin-profile { display: flex; align-items: center; gap: 3cqw; flex: none; height: 25cqw; padding: 5cqw; }
.bs-satin-avatar-frame { width: 13cqw; height: 13cqw; border-radius: 4cqw; overflow: hidden; flex: none; }
.bs-satin-avatar { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.4); transform-origin: 50% 25%; }
.bs-satin-name { margin: 0; font-size: 5.5cqw; line-height: 1.25; letter-spacing: -.035em; font-weight: 500; }
.bs-satin-found { display: flex; align-items: center; gap: 1.6cqw; margin: 1.5cqw 0 0; font-size: 3.8cqw; line-height: 1.3; color: #778079; }
.bs-satin-found strong { font-weight: 500; color: #32483c; }
.bs-satin-of { display: block; width: 5.5cqw; height: 5.5cqw; object-fit: contain; flex: none; }
.bs-satin-rows { display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); flex: 1; min-height: 0; list-style: none; margin: 0; padding: 0 5cqw 4cqw; }
.bs-satin-row { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; min-width: 0; border-top: 1px solid #efedf3; font-size: 3.9cqw; line-height: 1.3; }
.bs-satin-label { display: flex; align-items: center; gap: 2cqw; min-width: 0; }
.bs-satin-icon-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 7cqw; height: 7.5cqw; border-radius: 2cqw; background: #f1eff5; color: #9990a6; }
.bs-satin-icon { display: block; width: 4.8cqw; height: 4.8cqw; flex: none; }
.bs-satin-state { flex: none; padding: 1.2cqw 1.5cqw; border-radius: 1.5cqw; background: #f2f4f2; color: #258267; font-size: 3.6cqw; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.bs-satin-takedowns .bs-satin-state {
    transform-origin: center;
    animation: bs-satin-badge-cycle 8.4s cubic-bezier(.22, 1, .36, 1) infinite;
}
.bs-satin-takedowns .bs-satin-row:nth-child(1) .bs-satin-state { animation-delay: -7s; }
.bs-satin-takedowns .bs-satin-row:nth-child(2) .bs-satin-state { animation-delay: -5.6s; }
.bs-satin-takedowns .bs-satin-row:nth-child(3) .bs-satin-state { animation-delay: -4.2s; }
.bs-satin-takedowns .bs-satin-row:nth-child(4) .bs-satin-state { animation-delay: -2.8s; }
.bs-satin-takedowns .bs-satin-row:nth-child(5) .bs-satin-state { animation-delay: -1.4s; }
.bs-satin-state--delisted, .bs-satin-state--taken { background: #f2edf9; color: #805bad; }
.bs-satin-state--delisted {
    border: 1px solid transparent;
    padding: calc(1.2cqw - 1px) calc(1.5cqw - 1px);
    background:
        linear-gradient(#f8f5fc, #f8f5fc) padding-box,
        linear-gradient(110deg, #ffaa0070, #ff840070, #ff3d8b70, #e14dff70, #4f7bff70, #38bdf870, #22c58170, #ffd00070, #ffaa0070) border-box;
}
.bs-satin-state--launched { background: #faf4e9; color: #926316; }
.bs-satin-state--found { background: #f9eff1; color: #b86272; }
.bs-satin-scan-top { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 3cqw 3cqw 0; padding: 6cqw 5cqw; border-radius: 4.5cqw; background: linear-gradient(150deg, #f0edf8, #f9f7fc 65%, #efecf7); }
.bs-satin-scan-heading { display: flex; align-items: center; gap: 2cqw; margin: 0; font-size: 5cqw; line-height: 1.4; font-weight: 500; }
.bs-satin-ascii {
    position: absolute;
    top: 6cqw;
    right: 6cqw;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    width: 34cqw;
    color: #9274b0;
    font: 2.6cqw/1.2 ui-monospace, monospace;
    text-align: center;
    mask-image: linear-gradient(45deg, transparent 10%, #000 75%);
    pointer-events: none;
    user-select: none;
}
.bs-satin-ascii > span {
    opacity: 0;
    animation: bs-satin-ascii-fill 4.8s steps(1, end) infinite;
    animation-delay: calc(var(--step) * 60ms);
}
.bs-satin-scan-heading .bs-satin-icon { color: #9990a6; }
.bs-satin-metric { display: flex; align-items: baseline; gap: 1cqw; margin: auto 0 0; font-size: 28cqw; line-height: 1; letter-spacing: -.08em; font-weight: 500; color: #463654; font-variant-numeric: tabular-nums; }
.bs-satin-metric span { align-self: flex-start; margin: 3cqw 0 0 1cqw; font-size: 13cqw; letter-spacing: -.05em; }
.bs-satin-progress-label { margin: 2.5cqw 0 5cqw; font-size: 3.8cqw; font-weight: 500; line-height: 1.3; letter-spacing: .1em; color: #74627f; }
.bs-satin-meter { flex: none; height: 3cqw; border-radius: 3cqw; background: #e0dbea; overflow: hidden; }
.bs-satin-meter-fill { position: relative; height: 100%; width: 65%; border-radius: inherit; background: linear-gradient(90deg, #a888e9, #7540eb); overflow: hidden; }
.bs-satin-meter-fill::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, #ffffff38 50%, transparent 70%); transform: translateX(-120%); animation: bs-satin-sheen 6.5s ease-in-out infinite; }
.bs-satin-scan-rows { flex: none; height: 44cqw; grid-template-rows: repeat(3, minmax(0, 1fr)); padding-top: 2cqw; }
.bs-satin-scan-rows .bs-satin-row { font-size: 4.4cqw; }
.bs-satin-scan-rows .bs-satin-state { font-size: 4cqw; }
.bs-satin-scan-rows .bs-satin-row:first-child { border-top: 0; }
.bs-satin-scan-rows .bs-satin-row:first-child .bs-satin-icon-tile { color: #b48a3b; }
.bs-satin-scan-rows .bs-satin-row:last-child .bs-satin-icon-tile { color: #b76777; }

@keyframes bs-satin-enter {
    from { opacity: 0; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes bs-satin-badge-cycle {
    0%, 78%, 93%, 100% {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
    }
    84% {
        opacity: 0;
        transform: translateY(1.4cqw) rotate(3deg) scale(.96);
    }
    85% {
        opacity: 0;
        transform: translateY(-1.8cqw) rotate(-4deg) scale(.96);
    }
}
@keyframes bs-satin-sheen {
    0%, 68% { transform: translateX(-120%); }
    88%, 100% { transform: translateX(120%); }
}
@keyframes bs-satin-ascii-fill {
    0%, 12% { opacity: 0; }
    14%, 55% { opacity: .65; }
    57%, 100% { opacity: 0; }
}
/* Keep the original artwork in browsers without container-relative sizing. */
@supports not (width: 1cqw) {
    .bs-satin-art { background: var(--bs-satin-fallback) center / 100% 100% no-repeat; }
    .bs-satin-surface { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .bs-satin-surface { animation: none; }
    .bs-satin-takedowns .bs-satin-state { animation: none; }
    .ui-c65.bs-satin-art { transform: translate(-50%, -50%) rotate(-4deg) !important; }
    .ui-c85.bs-satin-art { transform: translate(-50%, -50%) rotate(-8deg) !important; }
    .bs-satin-meter-fill::before { animation: none; display: none; }
    .bs-satin-ascii > span { animation: none; opacity: .5; }
}