.story-cabinet {
    background:
        radial-gradient(circle at 12% 0, rgba(168, 85, 247, .2), transparent 36%),
        radial-gradient(circle at 90% 100%, rgba(53, 199, 255, .12), transparent 42%),
        #0d0b14;
    border: 1px solid rgba(168, 85, 247, .38);
    border-radius: 18px;
    box-shadow: 0 24px 90px rgba(0, 0, 0, .34);
    margin: 0 0 54px;
    overflow: hidden;
    padding: 28px;
    position: relative;
}

.story-cabinet::before {
    background: linear-gradient(90deg, var(--purple), #ff8fcf, var(--accent-3));
    content: "";
    height: 3px;
    inset: 0 0 auto;
    position: absolute;
}

.story-cabinet-heading {
    align-items: end;
    display: flex;
    gap: 28px;
    justify-content: space-between;
}

.story-cabinet-kicker {
    color: #d8b8ff;
    display: block;
    font-family: 'KenPixel', monospace;
    font-size: 9px;
    letter-spacing: .13em;
    margin-bottom: 8px;
}

.story-cabinet-heading h2 {
    color: #ff8fcf;
    font-family: 'KenPixel', monospace;
    font-size: 20px;
    line-height: 1.3;
    margin: 0;
}

.story-cabinet-heading p {
    color: #c2bccd;
    margin-top: 9px;
    max-width: 720px;
}

.story-cabinet-continue {
    background: linear-gradient(135deg, #ff8fcf, #a855f7);
    border-radius: 9px;
    box-shadow: 0 10px 30px rgba(168, 85, 247, .24);
    color: #0a0710;
    flex: 0 0 auto;
    font-family: 'KenPixel', monospace;
    font-size: 10px;
    padding: 13px 16px;
    text-decoration: none;
}

.story-cabinet-continue:hover,
.story-cabinet-continue:focus-visible {
    color: #fff;
    transform: translateY(-2px);
}

.story-passport-summary {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-wrap: wrap;
    gap: 9px 22px;
    margin: 22px 0;
    padding: 12px 0;
}

.story-passport-summary span {
    color: #918b9d;
    font-size: 12px;
}

.story-passport-summary b {
    color: #8ee8bd;
}

.story-thread-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-thread-card {
    background: #121019;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    min-height: 205px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.story-thread-card:hover {
    border-color: rgba(255, 143, 207, .44);
    box-shadow: 0 16px 45px rgba(0, 0, 0, .3);
    transform: translateY(-3px);
}

.story-thread-card.is-active {
    border-color: rgba(142, 232, 189, .33);
}

.story-thread-card.homeworld {
    grid-column: 1 / -1;
}

.story-thread-art {
    background: linear-gradient(145deg, #211331, #08070d);
    min-height: 100%;
    overflow: hidden;
    position: relative;
}

.story-thread-art::before,
.story-thread-art::after {
    content: "";
    inset: 0;
    position: absolute;
}

.story-thread-art::after {
    background:
        linear-gradient(180deg, transparent 0 58%, rgba(5, 4, 10, .92)),
        repeating-linear-gradient(0deg, transparent 0 8px, rgba(255, 255, 255, .018) 9px);
}

.story-thread-card.book .story-thread-art::before {
    background: url('/recompile/assets/recompile-wake-1-v1.png') center / cover;
    transform: scale(1.04);
}

.story-thread-card.nexus .story-thread-art::before {
    background:
        radial-gradient(circle at 50% 42%, rgba(38, 211, 255, .42), transparent 8%),
        conic-gradient(from 45deg, #0e0b18, #3e2758, #102b38, #0e0b18);
}

.story-thread-card.nexus-terminal .story-thread-art::before {
    background: url('/nexuscomix/assets/art/blus-calling-blus-terminal-switchboard.png') center / cover;
}

.story-thread-card.nexus-wrong-gate .story-thread-art::before {
    background: url('/nexuscomix/placeholders/carnival-gate.png') center / cover;
}

.story-thread-card.nexus-first-bell .story-thread-art::before {
    background: url('/nexuscomix/placeholders/girdy-summoning.png') center / cover;
}

.story-thread-card.nexus-good-infernal-cover .story-thread-art::before {
    animation: cabinet-infernal-breathe 8s ease-in-out infinite alternate;
    background: url('/nexuscomix/assets/art/covenant-good-infernal-cover.png') 55% center / cover;
    transform: scale(1.04);
}

.story-thread-card.nexus-good-infernal-training .story-thread-art::before {
    animation: cabinet-ward-draw 8s ease-in-out infinite alternate;
    background: url('/nexuscomix/assets/art/covenant-good-infernal-training.png') 50% center / cover;
    transform: scale(1.04);
}

.story-thread-card.nexus-good-infernal-fetch .story-thread-art::before {
    animation: cabinet-fetch-sweep 7s ease-in-out infinite alternate;
    background: url('/nexuscomix/assets/art/covenant-good-infernal-fetch.png') 52% center / cover;
    transform: scale(1.04);
}

.story-thread-card.nexus-good-infernal-covenant .story-thread-art::before {
    animation: cabinet-covenant-glow 9s ease-in-out infinite alternate;
    background: url('/nexuscomix/assets/art/covenant-good-infernal-covenant.png') 52% center / cover;
    transform: scale(1.04);
}

.story-thread-card.nexus-ticket-404 .story-thread-art::before {
    background: url('/nexuscomix/placeholders/scifi-neon-city.png') center / cover;
}

.story-thread-card.builder .story-thread-art::before {
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 143, 207, .62), transparent 7%),
        conic-gradient(from 45deg, #130d20, #4c2673, #170e25, #204d63, #130d20);
}

.story-thread-card.studio .story-thread-art::before {
    background:
        linear-gradient(145deg, transparent 0 22%, rgba(168, 117, 255, .24) 23% 45%, transparent 46%),
        linear-gradient(35deg, #0b0811, #321c45);
}

.story-thread-card.homeworld .story-thread-art::before {
    background:
        radial-gradient(circle at 50% 42%, #38739b 0 7%, #142c49 8% 16%, transparent 17%),
        radial-gradient(circle at 50% 44%, rgba(53, 199, 255, .28), transparent 42%),
        #071018;
}

.story-thread-card.recompile-wake-1 .story-thread-art::before {
    background: url('/recompile/assets/recompile-wake-1-v1.png') center / cover;
    transform: scale(1.04);
}

.story-thread-card.recompile-linger-1 .story-thread-art::before {
    animation: cabinet-mirror-drift 7s ease-in-out infinite;
    background: url('/recompile/assets/recompile-linger-1-v1.png') 52% center / cover;
    transform: scale(1.04);
}

.story-thread-card.recompile-phone-1 .story-thread-art::before {
    animation: cabinet-phone-pulse 6s ease-in-out infinite;
    background: url('/recompile/assets/recompile-phone-1-v1.png') 56% center / cover;
    transform: scale(1.04);
}

.story-thread-card.recompile-mirror-response-1 .story-thread-art::before {
    animation: cabinet-fracture-drift 7s ease-in-out infinite;
    background: url('/recompile/assets/recompile-mirror-response-1-v1.png') 51% center / cover;
    transform: scale(1.04);
}

.story-thread-card.recompile-reply-1 .story-thread-art::before {
    animation: cabinet-reply-pulse 6s ease-in-out infinite;
    background: url('/recompile/assets/recompile-reply-1-v1.png') 54% center / cover;
    transform: scale(1.04);
}

.story-thread-card.recompile-death-1 .story-thread-art::before {
    animation: cabinet-exception-reset 8s ease-in-out infinite;
    background: url('/recompile/assets/recompile-death-1-v1.png') center / cover;
    transform: scale(1.04);
}

.story-thread-card.recompile-wake-2 .story-thread-art::before {
    animation: cabinet-memory-wake 8s ease-in-out infinite alternate;
    background: url('/recompile/assets/recompile-wake-2-v1.png') 42% center / cover;
    transform: scale(1.04);
}

.story-thread-card.recompile-search-apartment .story-thread-art::before {
    animation: cabinet-notebook-evidence 9s ease-in-out infinite alternate;
    background: url('/recompile/assets/recompile-search-apartment-v1.png') 56% center / cover;
    transform: scale(1.04);
}

.story-thread-card.recompile-mirror-2 .story-thread-art::before {
    animation: cabinet-threshold-door 8s ease-in-out infinite alternate;
    background: url('/recompile/assets/recompile-mirror-2-v1.png') 52% center / cover;
    transform: scale(1.04);
}

.story-thread-card.recompile-xmarks .story-thread-art::before {
    animation: cabinet-evidence-map 9s ease-in-out infinite alternate;
    background: url('/recompile/assets/recompile-xmarks-v1.png') 55% center / cover;
    transform: scale(1.04);
}

.story-thread-card.recompile-call-self .story-thread-art::before {
    animation: cabinet-layer-call 7s ease-in-out infinite alternate;
    background: url('/recompile/assets/recompile-call-self-v1.png') 47% center / cover;
    transform: scale(1.04);
}

.story-thread-card.recompile-not-ready .story-thread-art::before {
    animation: cabinet-patient-mirror 9s ease-in-out infinite alternate;
    background: url('/recompile/assets/recompile-not-ready-v1.png') 52% center / cover;
    transform: scale(1.04);
}

.story-thread-reticle {
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    height: 42px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    z-index: 2;
}

.story-thread-reticle::before,
.story-thread-reticle::after {
    background: rgba(255, 255, 255, .36);
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.story-thread-reticle::before { height: 1px; width: 64px; }
.story-thread-reticle::after { height: 64px; width: 1px; }

.story-thread-cue {
    background: rgba(7, 6, 12, .76);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    bottom: 13px;
    color: #f7f2ff;
    font-family: 'KenPixel', monospace;
    font-size: 8px;
    font-style: normal;
    left: 12px;
    letter-spacing: .08em;
    line-height: 1.45;
    max-width: calc(100% - 24px);
    padding: 7px 8px;
    position: absolute;
    text-shadow: 0 1px 8px #000;
    z-index: 3;
}

.story-thread-card.recompile-linger-1 .story-thread-cue {
    animation: cabinet-mirror-cue 7s ease-in-out infinite;
    left: auto;
    right: 12px;
}

.story-thread-card.recompile-phone-1 .story-thread-cue {
    animation: cabinet-message-cue 6s ease-in-out infinite;
    letter-spacing: .02em;
}

.story-thread-card.recompile-mirror-response-1 .story-thread-cue {
    animation: cabinet-fracture-cue 7s ease-in-out infinite;
    left: auto;
    right: 12px;
}

.story-thread-card.recompile-reply-1 .story-thread-cue {
    animation: cabinet-reply-cue 6s ease-in-out infinite;
    letter-spacing: .02em;
}

.story-thread-card.recompile-death-1 .story-thread-cue {
    animation: cabinet-exception-cue 8s ease-in-out infinite;
    letter-spacing: .04em;
}

.story-thread-card.recompile-wake-2 .story-thread-cue {
    animation: cabinet-memory-cue 8s ease-in-out infinite;
    left: auto;
    right: 12px;
}

.story-thread-card.recompile-search-apartment .story-thread-cue {
    animation: cabinet-notebook-cue 9s ease-in-out infinite;
    border-color: rgba(209, 176, 112, .42);
    color: #f6e6c5;
    left: auto;
    right: 12px;
}

.story-thread-card.recompile-mirror-2 .story-thread-cue {
    animation: cabinet-threshold-cue 8s ease-in-out infinite;
    border-color: rgba(255, 184, 73, .48);
    color: #ffe0a2;
    left: auto;
    right: 12px;
    text-shadow: 0 0 12px rgba(255, 184, 73, .6);
}

.story-thread-card.recompile-xmarks .story-thread-cue {
    animation: cabinet-map-cue 9s ease-in-out infinite;
    border-color: rgba(218, 183, 105, .46);
    color: #fbe8be;
    left: auto;
    right: 12px;
}

.story-thread-card.recompile-call-self .story-thread-cue {
    animation: cabinet-call-cue 7s ease-in-out infinite;
    border-color: rgba(124, 195, 236, .44);
    color: #e6f4ff;
    letter-spacing: .035em;
}

.story-thread-card.recompile-not-ready .story-thread-cue {
    animation: cabinet-patient-cue 9s ease-in-out infinite;
    border-color: rgba(226, 173, 86, .4);
    color: #f4e2c1;
    left: auto;
    right: 12px;
}

@keyframes cabinet-mirror-drift {
    0%, 44%, 100% { filter: saturate(.9); transform: scale(1.04) translateX(0); }
    48%, 58% { filter: saturate(1.15) contrast(1.06); transform: scale(1.055) translateX(2px); }
}

@keyframes cabinet-mirror-cue {
    0%, 36%, 100% { opacity: .38; transform: translateY(2px); }
    48%, 72% { opacity: 1; transform: translateY(0); }
}

@keyframes cabinet-phone-pulse {
    0%, 22%, 100% { filter: brightness(.92) saturate(.92); transform: scale(1.04); }
    30%, 42% { filter: brightness(1.13) saturate(1.12); transform: scale(1.055); }
}

@keyframes cabinet-message-cue {
    0%, 18%, 100% { opacity: .48; transform: translateY(3px); }
    30%, 74% { opacity: 1; transform: translateY(0); }
}

@keyframes cabinet-fracture-drift {
    0%, 42%, 100% { filter: brightness(.92) contrast(1); transform: scale(1.04) translateX(0); }
    49%, 62% { filter: brightness(1.06) contrast(1.08); transform: scale(1.058) translateX(2px); }
}

@keyframes cabinet-fracture-cue {
    0%, 34%, 100% { opacity: .34; transform: translateY(2px); }
    48%, 74% { opacity: 1; transform: translateY(0); }
}

@keyframes cabinet-reply-pulse {
    0%, 20%, 100% { filter: brightness(.9) saturate(.92); transform: scale(1.04); }
    31%, 48% { filter: brightness(1.12) saturate(1.1); transform: scale(1.057); }
}

@keyframes cabinet-reply-cue {
    0%, 16%, 100% { opacity: .46; transform: translateY(3px); }
    30%, 76% { opacity: 1; transform: translateY(0); }
}

@keyframes cabinet-exception-reset {
    0%, 46% { filter: brightness(.94) saturate(.95); transform: scale(1.04); }
    62%, 72% { filter: brightness(.12) saturate(.55); transform: scale(1.05); }
    100% { filter: brightness(.92) saturate(.92); transform: scale(1.06); }
}

@keyframes cabinet-exception-cue {
    0%, 38% { opacity: .58; transform: translateY(2px); }
    50%, 60% { opacity: .12; transform: translateY(3px); }
    68%, 90% { opacity: 1; transform: translateY(0); }
    100% { opacity: .58; transform: translateY(2px); }
}

@keyframes cabinet-memory-wake {
    from { filter: brightness(.88) contrast(1); transform: scale(1.04); }
    to { filter: brightness(1.05) contrast(1.07); transform: scale(1.06) translateX(2px); }
}

@keyframes cabinet-memory-cue {
    0%, 18%, 100% { opacity: .34; transform: translateY(3px); }
    38%, 76% { opacity: 1; transform: translateY(0); }
}

@keyframes cabinet-notebook-evidence {
    from { filter: brightness(.9) contrast(1); transform: scale(1.04) translateX(-1px); }
    to { filter: brightness(1.04) contrast(1.06); transform: scale(1.065) translate(2px, 1px); }
}

@keyframes cabinet-notebook-cue {
    0%, 20%, 100% { opacity: .34; transform: translateY(3px); }
    38%, 78% { opacity: 1; transform: translateY(0); }
}

@keyframes cabinet-threshold-door {
    from { filter: brightness(.9) saturate(.92); transform: scale(1.04); }
    to { filter: brightness(1.09) saturate(1.13); transform: scale(1.062) translateX(-2px); }
}

@keyframes cabinet-threshold-cue {
    0%, 16%, 100% { opacity: .3; text-shadow: 0 0 6px rgba(255, 184, 73, .35); transform: translateY(3px); }
    38%, 74% { opacity: 1; text-shadow: 0 0 16px rgba(255, 184, 73, .78); transform: translateY(0); }
}

@keyframes cabinet-evidence-map {
    from { filter: brightness(.9) contrast(1); transform: scale(1.04) translateX(-1px); }
    to { filter: brightness(1.05) contrast(1.06); transform: scale(1.065) translate(2px, 1px); }
}

@keyframes cabinet-map-cue {
    0%, 18%, 100% { opacity: .34; transform: translateY(3px); }
    38%, 78% { opacity: 1; transform: translateY(0); }
}

@keyframes cabinet-layer-call {
    from { filter: brightness(.88) saturate(.9); transform: scale(1.04); }
    to { filter: brightness(1.06) saturate(1.08); transform: scale(1.062) translateX(-2px); }
}

@keyframes cabinet-call-cue {
    0%, 16%, 100% { opacity: .4; transform: translateY(3px); }
    34%, 74% { opacity: 1; text-shadow: 0 0 14px rgba(104, 193, 255, .58); transform: translateY(0); }
}

@keyframes cabinet-patient-mirror {
    from { filter: brightness(1.02) saturate(1); transform: scale(1.04); }
    to { filter: brightness(.88) saturate(.82); transform: scale(1.058) translateX(1px); }
}

@keyframes cabinet-patient-cue {
    0%, 22%, 100% { opacity: .28; transform: translateY(3px); }
    42%, 78% { opacity: .92; transform: translateY(0); }
}

@keyframes cabinet-infernal-breathe {
    from { filter: saturate(.9) brightness(.88); transform: scale(1.04); }
    to { filter: saturate(1.12) brightness(1.05); transform: scale(1.08) translateY(-1%); }
}

@keyframes cabinet-ward-draw {
    from { filter: brightness(.88); transform: scale(1.05) translateX(-1%); }
    to { filter: brightness(1.08); transform: scale(1.08) translateX(1%); }
}

@keyframes cabinet-fetch-sweep {
    from { filter: saturate(.92); transform: scale(1.08) translateX(-2%); }
    to { filter: saturate(1.12); transform: scale(1.08) translateX(2%); }
}

@keyframes cabinet-covenant-glow {
    from { filter: brightness(.86) saturate(.92); transform: scale(1.04); }
    to { filter: brightness(1.08) saturate(1.1); transform: scale(1.07); }
}

.story-thread-body {
    padding: 18px;
}

.story-thread-top {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.story-thread-top span,
.story-thread-top b {
    font-size: 9px;
    letter-spacing: .08em;
}

.story-thread-top span { color: #b49ac9; }
.story-thread-top b { color: #ffc77d; }
.story-thread-card.is-active .story-thread-top b { color: #8ee8bd; }

.story-thread-body h3 {
    color: #fff;
    font-family: 'KenPixel', monospace;
    font-size: 13px;
    line-height: 1.4;
    margin: 13px 0 7px;
}

.story-thread-current {
    color: #ff8fcf;
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.story-thread-body p {
    color: #8f8997;
    font-size: 12px;
    line-height: 1.5;
    margin: 6px 0 14px;
}

.story-thread-body a {
    color: #d8b8ff;
    font-family: 'KenPixel', monospace;
    font-size: 9px;
    text-decoration: none;
}

.story-thread-body a:hover,
.story-thread-body a:focus-visible {
    color: #fff;
}

.story-cabinet-law {
    color: #777180;
    font-size: 11px;
    margin: 17px 0 0;
}

@media (max-width: 850px) {
    .story-cabinet-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .story-cabinet-continue {
        align-self: flex-start;
    }

    .story-thread-grid {
        grid-template-columns: 1fr;
    }

    .story-thread-card.homeworld {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    .story-cabinet {
        padding: 22px 15px;
    }

    .story-thread-card {
        grid-template-columns: 1fr;
    }

    .story-thread-art {
        min-height: 145px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-thread-card,
    .story-cabinet-continue,
    .story-thread-card.recompile-linger-1 .story-thread-art::before,
    .story-thread-card.recompile-phone-1 .story-thread-art::before,
    .story-thread-card.recompile-mirror-response-1 .story-thread-art::before,
    .story-thread-card.recompile-reply-1 .story-thread-art::before,
    .story-thread-card.recompile-death-1 .story-thread-art::before,
    .story-thread-card.recompile-wake-2 .story-thread-art::before,
    .story-thread-card.recompile-search-apartment .story-thread-art::before,
    .story-thread-card.recompile-mirror-2 .story-thread-art::before,
    .story-thread-card.recompile-xmarks .story-thread-art::before,
    .story-thread-card.recompile-call-self .story-thread-art::before,
    .story-thread-card.recompile-not-ready .story-thread-art::before,
    .story-thread-card[class*="nexus-good-infernal"] .story-thread-art::before,
    .story-thread-card.recompile-linger-1 .story-thread-cue,
    .story-thread-card.recompile-phone-1 .story-thread-cue,
    .story-thread-card.recompile-mirror-response-1 .story-thread-cue,
    .story-thread-card.recompile-reply-1 .story-thread-cue,
    .story-thread-card.recompile-death-1 .story-thread-cue,
    .story-thread-card.recompile-wake-2 .story-thread-cue,
    .story-thread-card.recompile-search-apartment .story-thread-cue,
    .story-thread-card.recompile-mirror-2 .story-thread-cue,
    .story-thread-card.recompile-xmarks .story-thread-cue,
    .story-thread-card.recompile-call-self .story-thread-cue,
    .story-thread-card.recompile-not-ready .story-thread-cue {
        animation: none;
        transition: none;
    }
}