.signature-explorer-page {
    position: fixed;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    color: #f4ead1;
    background:
        radial-gradient(circle at 12% 14%, rgba(254, 214, 143, 0.28), transparent 36%),
        radial-gradient(circle at 88% 16%, rgba(96, 211, 255, 0.24), transparent 34%),
        linear-gradient(180deg, #162632 0%, #0d1a26 55%, #08131f 100%);
}

.signature-explorer-page[data-explorer-theme="sunset-wire"] {
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 191, 118, 0.34), transparent 38%),
        radial-gradient(circle at 84% 22%, rgba(255, 115, 166, 0.26), transparent 35%),
        linear-gradient(180deg, #2d1525 0%, #4b1e2d 48%, #271429 100%);
}

.signature-explorer-page[data-explorer-theme="mint-circuit"] {
    background:
        radial-gradient(circle at 14% 20%, rgba(150, 255, 218, 0.3), transparent 35%),
        radial-gradient(circle at 82% 16%, rgba(122, 220, 255, 0.24), transparent 32%),
        linear-gradient(180deg, #0d3028 0%, #0f3b36 52%, #091d22 100%);
}

.signature-explorer-page[data-explorer-theme="paper-noise"] {
    color: #332310;
    background:
        radial-gradient(circle at 22% 16%, rgba(255, 255, 255, 0.44), transparent 34%),
        radial-gradient(circle at 78% 20%, rgba(245, 233, 198, 0.4), transparent 36%),
        linear-gradient(180deg, #d2c3a6 0%, #c5b392 52%, #b79f78 100%);
}

.signature-explorer-page::before,
.signature-explorer-page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.signature-explorer-page::before {
    opacity: 0.14;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0px, rgba(255, 255, 255, 0.18) 1px, transparent 1px, transparent 4px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0px, rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 14px);
}

.signature-explorer-page.is-grid-overlay-off::before {
    opacity: 0;
}

.signature-explorer-page::after {
    z-index: 0;
    opacity: 0.35;
    background: radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, 0.58) 100%);
}

.signature-explorer-controls {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 24;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.signature-explorer-controls .button-98 {
    min-width: 128px;
    justify-content: center;
    padding: 4px 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.45px;
}

.signature-explorer-settings-panel {
    position: fixed;
    top: 14px;
    left: 158px;
    z-index: 24;
    width: min(360px, calc(100vw - 186px));
    padding: 10px;
    border: 2px solid #f6d084;
    background: linear-gradient(180deg, rgba(8, 20, 31, 0.96) 0%, rgba(5, 12, 22, 0.96) 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.signature-explorer-settings-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.signature-explorer-settings-panel h2 {
    margin: 0 0 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffd98a;
}

.signature-explorer-settings-panel label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    color: #f7ebcf;
}

.signature-explorer-settings-panel select {
    width: 100%;
    margin: 0;
    padding: 4px 6px;
    border: 2px inset #d6d6d6;
    font-size: 13px;
    font-family: 'PixeloidSans', 'PixelOperator', sans-serif;
    color: #1a1a1a;
    background: #e6e6e6;
}

.signature-explorer-zoom-row {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.signature-explorer-zoom-row .button-98 {
    min-width: 34px;
    width: 34px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 18px;
}

.signature-explorer-zoom-value {
    min-width: 54px;
    text-align: center;
    font-size: 12px;
    color: #fff2cf;
}

.signature-explorer-settings-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.signature-explorer-settings-actions .button-98 {
    flex: 1;
    min-width: 112px;
    padding: 4px 8px;
    font-size: 12px;
}

.signature-explorer-toggle-list {
    margin-top: 4px;
    display: grid;
    gap: 6px;
}

.signature-explorer-toggle-item {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #f7ebcf;
}

.signature-explorer-toggle-item input[type="checkbox"] {
    margin: 0;
}

.signature-explorer-status {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 24;
    max-width: min(520px, calc(100vw - 28px));
    padding: 7px 9px;
    border: 2px inset #d4d4d4;
    font-size: 12px;
    line-height: 1.35;
    color: #f8f4e5;
    background: rgba(7, 16, 27, 0.9);
}

.signature-explorer-status.is-error {
    border-color: #cc5f5f;
    color: #ffd8d8;
}

.signature-explorer-viewport {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    -ms-touch-action: none;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
}

.signature-explorer-page.is-panning .signature-explorer-viewport {
    cursor: grabbing;
}

.signature-explorer-world {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    transform-origin: 0 0;
    will-change: transform;
}

.signature-explorer-timeline-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    border-top: 3px dotted rgba(255, 225, 167, 0.6);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 140ms ease;
}

.signature-explorer-world.is-layout-linear .signature-explorer-timeline-line {
    opacity: 1;
}

.signature-explorer-day-groups {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.signature-explorer-day-group {
    position: absolute;
    height: 0;
    border-top: 2px solid rgba(255, 225, 167, 0.7);
}

.signature-explorer-day-group::before,
.signature-explorer-day-group::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 12px;
    border-top: 2px solid rgba(255, 225, 167, 0.7);
}

.signature-explorer-day-group::before {
    left: -2px;
    transform-origin: left center;
    transform: rotate(-30deg);
}

.signature-explorer-day-group::after {
    right: -2px;
    transform-origin: right center;
    transform: rotate(30deg);
}

.signature-explorer-day-group-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    padding: 2px 7px;
    border: 2px solid rgba(255, 213, 142, 0.65);
    background: rgba(8, 14, 22, 0.94);
    color: #ffecc0;
    font-size: 10px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.signature-explorer-item {
    position: absolute;
    width: 204px;
    height: 92px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: 2px solid rgba(255, 214, 151, 0.74);
    background: linear-gradient(180deg, rgba(24, 40, 58, 0.98) 0%, rgba(12, 24, 36, 0.98) 100%);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 248, 224, 0.12);
    transform: translate(-50%, -50%) rotate(calc(var(--signature-rotation, 0deg) * var(--signature-tilt-factor, 1))) scale(var(--signature-scale-factor, 1));
    transform-origin: center center;
    transition:
        left 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
        top 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 170ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease;
    z-index: 1;
    cursor: pointer;
    user-select: none;
    overflow: visible;
}

.signature-explorer-item::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 132px;
    height: 10px;
    transform: translateX(-50%);
}

.signature-explorer-item:hover,
.signature-explorer-item:focus-visible,
.signature-explorer-item.is-tooltip-visible {
    --signature-tilt-factor: 0;
    --signature-scale-factor: 1.08;
    border-color: rgba(255, 236, 179, 1);
    box-shadow:
        0 11px 24px rgba(0, 0, 0, 0.44),
        0 0 0 1px rgba(255, 236, 183, 0.34) inset;
    z-index: 1200;
}

.signature-explorer-world.is-hover-boost .signature-explorer-item:hover,
.signature-explorer-world.is-hover-boost .signature-explorer-item:focus-visible,
.signature-explorer-world.is-hover-boost .signature-explorer-item.is-tooltip-visible {
    --signature-scale-factor: 1.14;
}

.signature-explorer-world.is-card-background-off .signature-explorer-item {
    border-color: rgba(255, 225, 167, 0.24);
    background: transparent;
    box-shadow: none;
}

.signature-explorer-item img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

.signature-explorer-download-button {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    padding: 2px 7px;
    border: 2px solid #d9d9d9;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-right-color: #474747;
    border-bottom-color: #474747;
    background: #c0c0c0;
    color: #121212;
    font-family: 'PixeloidSans', 'PixelOperator', sans-serif;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    z-index: 1203;
    white-space: nowrap;
}

.signature-explorer-download-button:active {
    border-top-color: #474747;
    border-left-color: #474747;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}

.signature-explorer-date {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    display: none;
    margin: 0;
    padding: 3px 7px;
    border: 2px solid rgba(255, 213, 142, 0.7);
    background: rgba(8, 14, 22, 0.95);
    color: #ffeec2;
    font-size: 10px;
    letter-spacing: 0.35px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1202;
}

.signature-explorer-tooltip {
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    transform: translate(0, -50%);
    margin: 0;
    padding: 5px 8px;
    border: 2px solid rgba(255, 213, 142, 0.7);
    background: rgba(8, 14, 22, 0.95);
    color: #ffeec2;
    font-size: 11px;
    letter-spacing: 0.35px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 1201;
    transition: opacity 170ms ease, transform 170ms ease;
}

.signature-explorer-item:hover .signature-explorer-tooltip,
.signature-explorer-item:focus-visible .signature-explorer-tooltip,
.signature-explorer-item.is-tooltip-visible .signature-explorer-tooltip {
    opacity: 1;
    transform: translate(4px, -50%);
}

.signature-explorer-item:hover .signature-explorer-download-button,
.signature-explorer-item:focus-visible .signature-explorer-download-button,
.signature-explorer-item.is-tooltip-visible .signature-explorer-download-button {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 780px) {
    .signature-explorer-controls .button-98 {
        min-width: 118px;
        padding: 4px 8px;
    }

    .signature-explorer-settings-panel {
        top: 106px;
        left: 14px;
        width: min(320px, calc(100vw - 28px));
    }

    .signature-explorer-status {
        right: 14px;
        left: auto;
        max-width: min(360px, calc(100vw - 28px));
        text-align: right;
    }
}