html,
body {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent !important;
    color-scheme: normal;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   BHIN SIGNATURE COMPACTA TRANSPARENTE
   Azul · Púrpura · Carmesí · Lino fino
========================================================= */

.bhin-signature {
    --bhin-blue: #00BFFF;
    --bhin-purple: #7B68EE;
    --bhin-crimson: #DC143C;
    --bhin-linen: #FFF8DC;
    --bhin-ink: rgba(4, 8, 7, 0.42);
    --bhin-border: rgba(255, 248, 220, 0.13);
    --bhin-muted: rgba(255, 248, 220, 0.58);

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent !important;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.bhin-signature *,
.bhin-signature *::before,
.bhin-signature *::after {
    box-sizing: border-box;
}

.bhin-signature__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    min-height: 38px;
    padding: 2px 3px;
    overflow: visible;
    color: var(--bhin-linen);
    text-decoration: none;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    transition: transform 0.24s ease, opacity 0.24s ease;
}

.bhin-signature__link:hover,
.bhin-signature__link:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.bhin-machine {
    display: grid;
    grid-template-columns: minmax(66px, auto) 4px minmax(62px, auto) 4px minmax(60px, auto);
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.bhin-reel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    min-width: 0;
    padding: 0 7px;
    overflow: hidden;
    border: 1px solid var(--bhin-border);
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 48%),
        var(--bhin-ink);
    box-shadow: inset 0 3px 6px rgba(0,0,0,.28);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.bhin-reel::before,
.bhin-reel::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    width: 100%;
    height: 5px;
    pointer-events: none;
}

.bhin-reel::before {
    top: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.22), transparent);
}

.bhin-reel::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.22), transparent);
}

.bhin-reel__word {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: rgba(255, 248, 220, 0.78);
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.015em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    will-change: transform, filter, opacity;
}

.bhin-reel__word.is-changing {
    animation: bhinCompactSpin 0.10s linear;
}

.bhin-machine__dot {
    color: rgba(255, 248, 220, 0.30);
    font-size: 10px;
    text-align: center;
}

.bhin-reel.is-locked .bhin-reel__word {
    animation: bhinCompactLock 0.34s cubic-bezier(.2, .8, .2, 1);
}

.bhin-reel--blue.is-locked .bhin-reel__word {
    color: var(--bhin-blue);
    text-shadow: 0 0 9px rgba(0, 191, 255, 0.40);
}

.bhin-reel--purple.is-locked .bhin-reel__word {
    color: var(--bhin-purple);
    text-shadow: 0 0 9px rgba(123, 104, 238, 0.44);
}

.bhin-reel--crimson.is-locked .bhin-reel__word {
    color: var(--bhin-crimson);
    text-shadow: 0 0 9px rgba(220, 20, 60, 0.40);
}

.bhin-signature__divider {
    width: 1px;
    height: 20px;
    flex: 0 0 1px;
    background: linear-gradient(180deg, transparent, rgba(255,248,220,.22), transparent);
}

.bhin-signature__credit {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    color: var(--bhin-muted);
    font-size: 8.6px;
    line-height: 1;
    white-space: nowrap;
}

.bhin-signature__credit strong {
    color: var(--bhin-linen);
    font-size: 9.4px;
    font-weight: 760;
    letter-spacing: -0.01em;
}

.bhin-signature__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: var(--bhin-linen);
    font-size: 10px;
    border: 1px solid rgba(255,248,220,.12);
    border-radius: 50%;
    background: rgba(255,248,220,.06);
    transition: color .22s ease, transform .22s ease, background-color .22s ease;
}

.bhin-signature__link:hover .bhin-signature__arrow,
.bhin-signature__link:focus-visible .bhin-signature__arrow {
    color: #07130d;
    background: var(--bhin-linen);
    transform: translate(1px, -1px);
}

.bhin-signature__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes bhinCompactSpin {
    0% { opacity: .15; filter: blur(3px); transform: translateY(-8px) scaleY(1.10); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0) scaleY(1); }
}

@keyframes bhinCompactLock {
    0% { opacity: .35; filter: blur(2px); transform: scale(1.06); }
    70% { transform: scale(.97); }
    100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

@media (max-width: 420px) {
    .bhin-signature__link { gap: 6px; }
    .bhin-machine { grid-template-columns: minmax(60px, auto) 3px minmax(57px, auto) 3px minmax(55px, auto); }
    .bhin-reel { padding-inline: 5px; }
    .bhin-reel__word { font-size: 7.4px; }
    .bhin-signature__credit { gap: 3px; font-size: 8px; }
    .bhin-signature__credit strong { font-size: 8.7px; }
}

@media (max-width: 340px) {
    .bhin-signature__link {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 3px 5px;
    }
    .bhin-machine { grid-column: 1; grid-row: 1; }
    .bhin-signature__divider { display: none; }
    .bhin-signature__credit { grid-column: 1; grid-row: 2; justify-content: center; }
    .bhin-signature__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
    .bhin-signature *,
    .bhin-signature *::before,
    .bhin-signature *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}