Something went wrong. Try again.
A demon compendium, deterministically derived from DIDs + PDS records. haunt.at
atmosphere atproto
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452@import "tailwindcss";
:root { --home-background: #10090d; --home-highlight: #d4ae6b; --home-reading-offset: clamp(7rem, 20vh, 13rem); --home-sigil-size: clamp(8rem, 18vw, 10rem); --home-surface: #170e13; --home-text: #e8ddcc;}
body { background-color: #111; color: #eee; font-family: "Space Grotesk Variable", "Space Grotesk", sans-serif; font-size: 0.9375rem; line-height: 1.5; text-rendering: optimizeLegibility;}
.profile-page { background-color: var(--profile-background); background-image: var(--profile-atmosphere); background-attachment: fixed; background-size: 108% 108%;}
.profile-home-link,.state-masthead { color: color-mix(in srgb, currentColor 50%, transparent); font-size: 0.75rem; letter-spacing: 0.12em; margin-bottom: 1.5rem; text-transform: uppercase;}
.profile-home-link:hover,.profile-home-link:focus-visible { color: var(--profile-accent);}
.profile-home-link:focus-visible { outline: 2px solid var(--profile-accent); outline-offset: 3px;}
.home-page,.state-page { background-color: var(--home-background); background-image: radial-gradient(circle at 16% 12%, #2b111d 0, transparent 36rem), radial-gradient(circle at 82% 88%, #1e1016 0, transparent 32rem); color: var(--home-text);}
.state-content { padding-top: clamp(1.5rem, 4vw, 3rem);}
.state-masthead:focus-visible,.state-action:focus-visible { outline: 2px solid var(--home-highlight); outline-offset: 3px;}
.home-invocation,.state-reading { display: grid; justify-items: center; margin: var(--home-reading-offset) auto 0; text-align: center;}
.state-reading { max-width: 25rem;}
.state-page--loading .state-reading { animation: state-reading-enter 240ms ease-out 180ms forwards; opacity: 0;}
.state-page--loading .haunt-sigil { animation: state-sigil-summon 2.4s ease-in-out 420ms infinite;}
.home-sigil,.state-reading .haunt-sigil { height: var(--home-sigil-size); width: var(--home-sigil-size);}
.state-label { color: color-mix(in srgb, currentColor 48%, transparent); font-size: 0.6875rem; letter-spacing: 0.08em; margin-top: 0.875rem; text-transform: uppercase;}
.state-reading h1 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; margin-top: 1.5rem;}
.state-description { color: color-mix(in srgb, currentColor 60%, transparent); margin-top: 0.75rem;}
.state-action { border-bottom: 1px solid color-mix(in srgb, var(--home-highlight) 70%, transparent); color: var(--home-text); font-size: 0.875rem; margin-top: 1.75rem; padding-bottom: 0.15rem;}
@keyframes state-reading-enter { to { opacity: 1; }}
@keyframes state-sigil-summon { 50% { opacity: 0.58; transform: scale(0.985); }}
.haunt-sigil { color: var(--sigil-color, #9cc6d1); fill: none; height: 6.75rem; opacity: 0.88; stroke: currentColor; stroke-width: 1.25; width: 6.75rem;}
.haunt-sigil-node { fill: currentColor;}
.home-invocation-sigil { display: grid; gap: 0.5rem; justify-items: center;}
.home-search { border-bottom: 1px solid color-mix(in srgb, #a98345 66%, transparent);}
.home-search-area { margin-top: 2.25rem; max-width: 25rem; position: relative; width: min(100%, 25rem); z-index: 1;}
.home-search-input { background-color: transparent; font-size: 1rem; min-width: 0; padding: 0.625rem 0 0.75rem; width: 100%;}
.home-search-input:focus { outline: none;}
.home-search:focus-within { border-color: var(--home-highlight);}
.home-search-results { background-color: var(--home-surface); border: 1px solid color-mix(in srgb, #a98345 48%, transparent); border-radius: 0.25rem; inset-inline: 0; margin-top: 0.5rem; max-height: 16rem; overflow-y: auto; position: absolute; top: 100%; box-shadow: 0 1rem 2rem rgb(0 0 0 / 0.24);}
.home-search-result { align-items: center; display: grid; gap: 0.625rem; grid-template-columns: 2rem minmax(0, 1fr); padding: 0.5rem 0.625rem; text-align: left;}
.home-search-result:hover,.home-search-result:focus-visible { background-color: color-mix(in srgb, #6e2435 30%, transparent); outline: none;}
.home-search-result:focus-visible { outline: 2px solid var(--home-highlight); outline-offset: -2px;}
.home-search-results li + li { border-top: 1px solid color-mix(in srgb, #a98345 28%, transparent);}
.home-search-avatar { background-color: #2b111d; border-radius: 9999px; flex: none; height: 2rem; object-fit: cover; width: 2rem;}
.home-search-copy { min-width: 0;}
.home-search-name { font-size: 0.875rem; font-weight: 650;}
.home-search-handle,.home-search-status { color: color-mix(in srgb, currentColor 55%, transparent); font-size: 0.8125rem; line-height: 1.5;}
.home-search-status { inset-inline: 0; margin-top: 0.5rem; position: absolute; top: 100%;}
.home-how-it-works { color: color-mix(in srgb, currentColor 56%, transparent); margin: clamp(3rem, 8vh, 5rem) auto 0; max-width: 28rem; text-align: center;}
.home-how-it-works summary { cursor: pointer; font-size: 0.8125rem; list-style: none; margin-inline: auto; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.2em; width: fit-content;}
.home-how-it-works summary::-webkit-details-marker { display: none;}
.home-how-it-works summary:focus-visible { outline: 2px solid var(--home-highlight); outline-offset: 3px;}
.home-how-it-works-copy { display: grid; font-size: 0.8125rem; gap: 0.875rem; line-height: 1.6; margin-top: 1.25rem; text-align: left;}
.home-how-it-works-copy dl { display: grid; gap: 0.5rem; margin-top: 0.25rem;}
.home-how-it-works-copy dl div { display: grid; gap: 0.75rem; grid-template-columns: 4.75rem 1fr;}
.home-how-it-works-copy dt { color: var(--home-highlight); font-size: 0.8125rem; font-weight: 650;}
.home-footer { align-items: center; color: color-mix(in srgb, currentColor 42%, transparent); display: flex; font-size: 0.75rem; gap: 0.625rem; justify-content: center; margin-top: 2.5rem;}
.home-footer a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.2em;}
.home-footer a:hover { color: var(--home-text);}
.home-footer a:focus-visible { outline: 2px solid var(--home-highlight); outline-offset: 3px;}
@media (max-width: 24rem) { .home-sigil { height: 5.25rem; width: 5.25rem; }}
.profile-grid { display: grid; gap: 1.5rem;}
.profile-grid-column { display: flex; flex-direction: column; gap: 1.5rem;}
.profile-card { background-color: var(--profile-card); border-color: color-mix(in srgb, var(--profile-border) 58%, transparent); border-radius: var(--profile-card-radius); padding: clamp(1rem, 2vw, 1.25rem);}
.profile-link { color: var(--profile-accent); text-decoration-color: color-mix( in srgb, var(--profile-accent) 45%, transparent ); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;}
.profile-link:hover,.profile-link:focus-visible { text-decoration-color: currentColor;}
.profile-link:focus-visible,.profile-external-link:focus-visible { outline: 2px solid var(--profile-accent); outline-offset: 3px;}
.bluesky-profile { container-type: inline-size;}
.profile-identity-header { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: start; gap: 0.875rem;}
.profile-artifact--sigil { display: grid; place-items: center;}
.profile-sigil-artifact { height: clamp(8rem, 18vw, 10rem); width: clamp(8rem, 18vw, 10rem);}
.profile-name { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05;}
.profile-item-title { font-size: 0.9375rem; font-weight: 650; line-height: 1.3;}
.profile-copy { font-size: 0.9375rem; line-height: 1.6;}
.profile-secondary { font-size: 0.875rem; line-height: 1.5; opacity: 0.78;}
.profile-metadata { font-size: 0.75rem; line-height: 1.4; opacity: 0.62;}
@keyframes atmosphere-drift { to { background-position: 100% 100%; }}
@media (prefers-reduced-motion: no-preference) { .profile-page { animation: atmosphere-drift 28s ease-in-out infinite alternate; }}
@media (prefers-reduced-motion: reduce) { .state-page--loading .state-reading { animation-duration: 1ms; }
.state-page--loading .haunt-sigil { animation: none; }}