html[data-stage-theme="blackout"] {
    --app-ink: #111111;
    --app-paper: #e3e3e3;
    --app-panel: #f4f4f4;
    --app-bright: #ffffff;
    --app-muted: #515151;
    --app-line: rgba(17, 17, 17, .24);
    --app-red: #242424;
    --app-red-hover: #0b0b0b;
    --app-yellow: #cdcdcd;
    --app-accent-alt: #6f6f6f;
    --app-stage-subtle: #e5e5e5;
    --app-tier-top: #d4d4d4;
    --app-tier-npc: #ebebeb;
    --tier-5: #969696;
    --tier-4: #b4b4b4;
    --tier-3: #cecece;
    --tier-2: #e3e3e3;
    --tier-1: #f1f1f1;
    --stage-icon-border: #111111;
    --app-shadow: 3px 5px 18px rgba(17, 17, 17, .12);
    --stage-wash: rgba(227, 227, 227, .975);
    --stage-wallpaper: url('../assets/images/stage-blackout.jpg');
}

html[data-stage-theme="reappearance"] {
    --app-ink: #162526;
    --app-paper: #e6f0ef;
    --app-panel: #f6fbfa;
    --app-bright: #ffffff;
    --app-muted: #3f5858;
    --app-line: rgba(22, 81, 83, .26);
    --app-red: #086a72;
    --app-red-hover: #07585f;
    --app-yellow: #ead21b;
    --app-accent-alt: #a22678;
    --app-stage-subtle: #dcebea;
    --stage-icon-border: #00aebd;
    --app-shadow: 3px 6px 20px rgba(18, 69, 72, .13);
    --stage-wash: rgba(230, 240, 239, .975);
    --stage-wallpaper: url('../assets/images/stage-reappearance.jpg');
}

html[data-stage-theme="ariake"] {
    --app-ink: #292317;
    --app-paper: #eee8d9;
    --app-panel: #faf7ef;
    --app-bright: #fffdf8;
    --app-muted: #605743;
    --app-line: rgba(77, 61, 35, .25);
    --app-red: #795321;
    --app-red-hover: #61431b;
    --app-yellow: #d18a26;
    --app-accent-alt: #317572;
    --app-stage-subtle: #eee4cf;
    --stage-icon-border: #ad7b32;
    --app-shadow: 3px 6px 20px rgba(72, 53, 23, .13);
    --stage-wash: rgba(238, 232, 217, .975);
    --stage-wallpaper: url('../assets/images/stage-ariake.png');
}

html.stage-theme-pending {
    background: #e3e3e3;
}

html.stage-theme-pending body.app-page {
    visibility: hidden;
}

html[data-stage-theme] body.app-page {
    background:
        linear-gradient(var(--stage-wash), var(--stage-wash)),
        var(--stage-wallpaper) right 5vw top 100px / min(520px, 50vw) auto no-repeat fixed;
    background-color: var(--app-paper);
}

/* Each stage borrows its form from its icon; artwork has a place of its own. */
html[data-stage-theme="blackout"] body.app-page :is(img, .home-stage-art) {
    filter: grayscale(1);
}

html[data-stage-theme="blackout"] .upload-offsite-notice {
    border-color: var(--app-line);
    color: var(--app-muted);
    background: var(--app-stage-subtle);
}

/* Feedback may retain its signal colors within the monochrome stage. */
html[data-stage-theme="blackout"] :is(.app-alert, .site-message-toast) {
    --app-red: #8d2925;
    --app-yellow: #e7cf47;
}

html[data-stage-theme="blackout"] .home-stage-art {
    background-color: var(--app-paper);
    background-blend-mode: multiply;
}

html[data-stage-theme="blackout"] .home-title-initial {
    color: var(--app-ink);
    font-style: normal;
}

html[data-stage-theme="reappearance"] .home-stage-art::before,
html[data-stage-theme="reappearance"] .home-stage-art::after {
    position: absolute;
    width: 42%;
    height: 42%;
    content: "";
    pointer-events: none;
}

html[data-stage-theme="reappearance"] .home-stage-art::before {
    top: -8px;
    left: -8px;
    border-top: 2px solid var(--app-red);
    border-left: 2px solid var(--app-red);
}

html[data-stage-theme="reappearance"] .home-stage-art::after {
    right: -8px;
    bottom: -8px;
    border-right: 2px solid var(--app-accent-alt);
    border-bottom: 2px solid var(--app-accent-alt);
}

html[data-stage-theme="reappearance"] .home-title-line > span:last-child .home-title-initial {
    color: var(--app-accent-alt);
}

html[data-stage-theme="reappearance"] .timeline-item.is-active .timeline-dot {
    outline-color: var(--app-accent-alt);
}

html[data-stage-theme="ariake"] .home-title-words {
    font-weight: 600;
    letter-spacing: -.035em;
}

html[data-stage-theme="ariake"] .home-title-line-secondary {
    font-style: italic;
}

html[data-stage-theme="ariake"] .home-stage-art {
    border-radius: 50%;
    background: none;
}

html[data-stage-theme="ariake"] .home-stage-art::before,
html[data-stage-theme="ariake"] .home-stage-art::after {
    position: absolute;
    border: 1px solid var(--app-line);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

html[data-stage-theme="ariake"] .home-stage-art::before {
    inset: 20px;
    border: 0;
    background: var(--stage-wallpaper) center / cover no-repeat;
    outline: 1px solid var(--app-line);
    outline-offset: 10px;
}
html[data-stage-theme="ariake"] .home-stage-art::after { inset: 0; }
html[data-stage-theme="ariake"] .timeline-dot { border-radius: 50%; }
html[data-stage-theme="ariake"] .timeline-item.is-active .timeline-dot { outline-color: var(--app-accent-alt); }

html[data-stage-theme] .app-topbar {
    border-color: var(--app-line);
    background: var(--app-panel);
}

html[data-stage-theme] .app-brand .site-icon {
    border: 2px solid var(--stage-icon-border);
}

html[data-stage-theme] .app-view-tab.is-active {
    border-color: var(--app-red);
    color: var(--app-red);
    background: transparent;
}

html[data-stage-theme] .timeline-dot {
    border-color: var(--app-line);
    background: var(--app-panel);
}

html[data-stage-theme] .timeline-item.is-complete .timeline-dot,
html[data-stage-theme] .timeline-item.is-active .timeline-dot {
    border-color: var(--app-red);
    background: var(--app-red);
}

html[data-stage-theme] .timeline-item.is-active strong,
html[data-stage-theme] .app-kicker,
html[data-stage-theme] .app-panel-label {
    color: var(--app-red);
}

html[data-stage-theme] ::selection {
    color: var(--app-bright);
    background: var(--app-red);
}

html[data-stage-theme] body.app-page {
    caret-color: var(--app-red);
}

html[data-stage-theme] body.app-page *:focus-visible {
    outline-color: var(--app-red);
}

html[data-stage-theme] body.app-page ::-webkit-scrollbar-track {
    background: var(--app-paper);
}

html[data-stage-theme] body.app-page ::-webkit-scrollbar-thumb {
    border-color: var(--app-paper);
    background: var(--app-accent-alt);
}

@media (max-width: 820px) {
    html[data-stage-theme] body.app-page { background-attachment: scroll; }
}