body[data-page="anathema"] {
    color-scheme: dark;
    --bg-color: #02060a !important;
    --border-color: #26343d !important;
    --hover-color: #d2d8d8 !important;
    --link-color: #d2d8d8 !important;
    --shadow-color: rgba(0, 0, 0, 0.7) !important;
    background: #02060a !important;
    background-color: #02060a !important;
    color: #d2d8d8 !important;
}

body[data-page="anathema"] .theme-selector-container {
    display: none !important;
}

.anathema-page {
    width: 100%;
    min-height: calc(100svh - var(--nav-height, 92px));
    padding-top: 0 !important;
    overflow: hidden;
    background: #02060a !important;
    background-color: #02060a !important;
    color: #d2d8d8 !important;
    font-family: GohuFont14NerdFont, "Courier New", monospace;
}

.anathema-page *,
.anathema-page *::before,
.anathema-page *::after {
    box-sizing: border-box;
}

.anathema-stage {
    position: relative;
    display: grid;
    min-height: calc(100svh - var(--nav-height, 92px));
    overflow: hidden;
    isolation: isolate;
    background: #02060a !important;
    background-color: #02060a !important;
    color: #d2d8d8 !important;
}

.anathema-stage::before,
.anathema-stage::after {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    content: "";
}

.anathema-stage::before {
    opacity: 0.12;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.045) 0,
        rgba(255, 255, 255, 0.045) 1px,
        transparent 1px,
        transparent 4px
    );
    mix-blend-mode: screen;
}

.anathema-stage::after {
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.48) 100%);
}

.anathema-composition,
.anathema-title-screen {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #02060a;
}

.anathema-composition {
    opacity: 0;
    overflow: hidden;
}

.anathema-title-screen {
    object-fit: contain;
    filter: brightness(0.92) contrast(1.04);
}

.anathema-composition > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.anathema-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 42%, #111b22 0%, #0a1117 42%, #02060a 100%);
    opacity: 0;
    filter: brightness(0.92) contrast(1.04);
}

.anathema-background > span {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
}

.anathema-background-stars {
    background-repeat: repeat;
}

.anathema-background-stars--fine {
    opacity: 0.5;
    background-image:
        radial-gradient(circle at 11px 17px, rgba(215, 224, 222, 0.62) 0 0.7px, transparent 1.2px),
        radial-gradient(circle at 83px 41px, rgba(133, 161, 169, 0.42) 0 0.8px, transparent 1.25px),
        radial-gradient(circle at 149px 92px, rgba(212, 220, 216, 0.45) 0 0.6px, transparent 1.1px),
        radial-gradient(circle at 41px 121px, rgba(118, 150, 160, 0.3) 0 0.7px, transparent 1.2px);
    background-size: 191px 157px;
}

.anathema-background-stars--bright {
    opacity: 0.48;
    background-image:
        radial-gradient(circle at 14% 23%, rgba(233, 235, 225, 0.78) 0 1px, transparent 1.8px),
        radial-gradient(circle at 79% 18%, rgba(198, 211, 211, 0.6) 0 0.8px, transparent 1.6px),
        radial-gradient(circle at 28% 76%, rgba(201, 216, 216, 0.46) 0 0.7px, transparent 1.5px),
        radial-gradient(circle at 88% 69%, rgba(228, 226, 207, 0.55) 0 0.9px, transparent 1.7px);
    background-size: 100% 100%;
}

.anathema-background-grid {
    inset: -10% !important;
    opacity: 0.17;
    background-image:
        linear-gradient(rgba(102, 132, 143, 0.38) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102, 132, 143, 0.38) 1px, transparent 1px);
    background-size: 108px 108px;
    transform: perspective(600px) rotateX(3deg) rotateZ(-7deg) scale(1.12);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0 34%, transparent 76%);
    mask-image: radial-gradient(ellipse at center, #000 0 34%, transparent 76%);
}

.anathema-background-contours {
    width: 64% !important;
    height: 122% !important;
    top: -11% !important;
    right: auto !important;
    bottom: auto !important;
    opacity: 0.16;
    background: repeating-radial-gradient(
        ellipse at center,
        transparent 0 25px,
        rgba(112, 145, 151, 0.34) 26px 27px,
        transparent 28px 45px
    );
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0 36%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 0 36%, transparent 75%);
}

.anathema-background-contours--left {
    left: -20% !important;
    transform: rotate(-19deg);
}

.anathema-background-contours--right {
    right: -20% !important;
    left: auto !important;
    transform: rotate(19deg) scaleX(-1);
}

.anathema-orbit {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    border: 1px solid rgba(113, 145, 154, 0.26);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(28, 47, 56, 0.18);
}

.anathema-orbit--outer {
    width: 122%;
    height: 92%;
    transform: translate(-50%, -50%) rotate(-13deg);
}

.anathema-orbit--middle {
    width: 88%;
    height: 128%;
    border-color: rgba(97, 127, 138, 0.22);
    transform: translate(-50%, -50%) rotate(23deg);
}

.anathema-orbit--inner {
    width: 64%;
    height: 72%;
    border-color: rgba(121, 153, 160, 0.2);
    transform: translate(-50%, -50%) rotate(-31deg);
}

.anathema-background-lines {
    opacity: 0.22;
    background:
        linear-gradient(24deg, transparent 0 46%, rgba(119, 151, 158, 0.32) 46.1% 46.2%, transparent 46.3%),
        linear-gradient(157deg, transparent 0 58%, rgba(119, 151, 158, 0.26) 58.1% 58.2%, transparent 58.3%),
        linear-gradient(90deg, transparent 0 49.9%, rgba(124, 153, 159, 0.18) 50% 50.1%, transparent 50.2%);
}

.anathema-background-noise {
    opacity: 0.3;
    background:
        repeating-linear-gradient(0deg, rgba(207, 216, 211, 0.035) 0 1px, transparent 1px 4px),
        radial-gradient(ellipse at center, transparent 36%, rgba(0, 0, 0, 0.36) 100%);
    mix-blend-mode: screen;
}

.anathema-wordmark,
.anathema-tricorn {
    opacity: 0;
    transform-origin: center;
}

.anathema-stage[data-state="running"] .anathema-composition,
.anathema-stage[data-state="complete"] .anathema-composition {
    opacity: 1;
}

.anathema-stage[data-state="running"] .anathema-background,
.anathema-stage[data-state="complete"] .anathema-background {
    animation: anathema-background-arrive 2.4s ease-out both;
}

.anathema-stage[data-state="running"] .anathema-wordmark,
.anathema-stage[data-state="complete"] .anathema-wordmark {
    animation: anathema-wordmark-arrive 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.anathema-stage[data-state="running"] .anathema-tricorn,
.anathema-stage[data-state="complete"] .anathema-tricorn {
    animation: anathema-tricorn-arrive 2.1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
}

.anathema-stage[data-state="running"] .anathema-title-screen,
.anathema-stage[data-state="complete"] .anathema-title-screen {
    animation: anathema-title-arrive 3.2s ease-out both;
}

.anathema-start {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    transition: opacity 0.7s ease;
}

.anathema-stage[data-state="running"] .anathema-start,
.anathema-stage[data-state="complete"] .anathema-start {
    pointer-events: none;
    opacity: 0;
}

.anathema-enter-button {
    position: absolute;
    top: 64%;
    left: 50%;
    z-index: 5;
    min-width: 190px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid rgba(210, 216, 216, 0.38);
    border-radius: 2px;
    color: rgba(218, 224, 222, 0.82);
    background: rgba(2, 6, 10, 0.68);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.42);
    cursor: pointer;
    font: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    line-height: 1;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.2s ease, color 0.2s ease;
    visibility: hidden;
}

.anathema-enter-button.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
}

.anathema-enter-button:hover:not(:disabled) {
    border-color: rgba(236, 240, 236, 0.78);
    color: #fff;
    background: rgba(210, 216, 216, 0.1);
}

.anathema-enter-button:focus-visible {
    outline: 2px solid rgba(238, 239, 231, 0.85);
    outline-offset: 4px;
}

.anathema-enter-button:disabled {
    border-color: rgba(210, 216, 216, 0.22);
    color: rgba(210, 216, 216, 0.62);
    cursor: default;
}

.anathema-start-button {
    width: auto;
    min-width: 190px;
    height: 48px;
    padding: 0 22px;
    border: 1px solid rgba(238, 239, 231, 0.34);
    border-radius: 2px;
    color: rgba(238, 239, 231, 0.78);
    background: rgba(4, 8, 10, 0.2);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 24px rgba(219, 222, 211, 0.08);
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    line-height: 1;
    animation: anathema-start-pulse 2.4s ease-in-out infinite;
}

.anathema-start-button:hover {
    border-color: rgba(238, 239, 231, 0.76);
    color: #fff;
    background: rgba(238, 239, 231, 0.08);
}

.anathema-start-button:focus-visible,
.anathema-control:focus-visible {
    outline: 2px solid rgba(238, 239, 231, 0.85);
    outline-offset: 4px;
}

.anathema-start-button:disabled {
    cursor: wait;
}

.anathema-controls {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 6;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.anathema-stage[data-state="complete"] .anathema-controls {
    opacity: 0.52;
}

.anathema-controls:hover,
.anathema-controls:focus-within {
    opacity: 1;
}

.anathema-control,
a.anathema-control:link,
a.anathema-control:visited,
a.anathema-control:active {
    box-sizing: border-box;
    display: inline-grid;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(238, 239, 231, 0.25);
    border-radius: 50%;
    color: rgba(238, 239, 231, 0.7);
    background: rgba(4, 8, 10, 0.42);
    box-shadow: none;
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.anathema-control:hover {
    border-color: rgba(238, 239, 231, 0.75);
    color: #fff;
    background: rgba(238, 239, 231, 0.1);
    text-decoration: none;
}

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

.anathema-noscript {
    position: absolute;
    inset: 20px;
    z-index: 8;
    display: grid;
    place-content: center;
    padding: 24px;
    border: 1px solid rgba(238, 239, 231, 0.3);
    color: rgba(238, 239, 231, 0.85);
    background: #050809;
    text-align: center;
}

.anathema-noscript a {
    color: #d6bd80;
}

@keyframes anathema-title-arrive {
    0% { opacity: 0; filter: brightness(0.5) contrast(1.15) blur(3px); }
    55% { opacity: 0.92; filter: brightness(0.88) contrast(1.05) blur(0); }
    100% { opacity: 1; filter: brightness(0.92) contrast(1.04) blur(0); }
}

@keyframes anathema-background-arrive {
    0% { opacity: 0; filter: brightness(0.4) contrast(1.15) blur(3px); }
    58% { opacity: 0.86; filter: brightness(0.84) contrast(1.06) blur(0); }
    100% { opacity: 1; filter: brightness(0.92) contrast(1.04) blur(0); }
}

@keyframes anathema-wordmark-arrive {
    0% { opacity: 0; filter: brightness(0.35) blur(3px); transform: scale(1.015); }
    56% { opacity: 0.74; filter: brightness(0.9) blur(0.2px); transform: scale(1); }
    100% { opacity: 1; filter: brightness(1) blur(0); transform: scale(1); }
}

@keyframes anathema-tricorn-arrive {
    0% { opacity: 0; filter: brightness(0.3) blur(3px); transform: scale(1.02); }
    58% { opacity: 0.8; filter: brightness(0.9) blur(0.25px); transform: scale(1); }
    100% { opacity: 1; filter: brightness(1) blur(0); transform: scale(1); }
}

@keyframes anathema-start-pulse {
    0%, 100% { opacity: 0.48; transform: scale(0.96); }
    50% { opacity: 0.9; transform: scale(1.04); }
}

@media (max-width: 700px) {
    .anathema-composition img,
    .anathema-title-screen {
        object-fit: cover;
    }

    .anathema-controls {
        right: 14px;
        bottom: 14px;
    }

    .anathema-enter-button {
        top: 66%;
        min-width: 174px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anathema-page *,
    .anathema-page *::before,
    .anathema-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}