:root {
    /* Interface readable explanations navigation. Sans** Sans* Mono**. Mono*. */
    --deep-cave-violet: #171126;
    --haskell-plum: #5E5086;
    --lambda-lavender: #A78BFA;
    --spectral-mint: #7CF5C6;
    --spellbook-parchment: #F4EAD2;
    --monster-ember: #FF6B4A;
    --ink-shadow: #08060D;
    --typeclass-gold: #D8B45A;
    --display: 'Unbounded', sans-serif;
    --serif: 'Cormorant Garamond', serif;
    --body: 'IBM Plex Sans', sans-serif;
    --code: 'JetBrains Mono', monospace;
    --Sans: 'IBM Plex Sans';
    --Mono: 'JetBrains Mono';
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--ink-shadow);
}

body {
    margin: 0;
    color: var(--spellbook-parchment);
    font-family: var(--body);
    background:
        radial-gradient(circle at 18% 5%, rgba(167, 139, 250, .18), transparent 28rem),
        radial-gradient(circle at 82% 20%, rgba(124, 245, 198, .08), transparent 24rem),
        linear-gradient(180deg, var(--ink-shadow), var(--deep-cave-violet) 38%, var(--ink-shadow));
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .34;
    background-image:
        linear-gradient(rgba(244, 234, 210, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 234, 210, .025) 1px, transparent 1px);
    background-size: 48px 48px, 48px 48px;
    mask-image: radial-gradient(circle at 50% 45%, black, transparent 82%);
}

.cursor-orb {
    position: fixed;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--spectral-mint);
    box-shadow: 0 0 22px var(--spectral-mint), 0 0 60px rgba(124, 245, 198, .55);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 30;
    mix-blend-mode: screen;
    opacity: .55;
}

.spell-index {
    position: fixed;
    z-index: 20;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    align-items: center;
    padding: .55rem;
    border: 1px solid rgba(167, 139, 250, .26);
    background: rgba(8, 6, 13, .62);
    backdrop-filter: blur(18px);
    border-radius: 999px;
}

.spell-index a {
    color: var(--spellbook-parchment);
    text-decoration: none;
    font: 600 clamp(.58rem, 1.1vw, .78rem)/1 var(--code);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .65rem .9rem;
    border-radius: 999px;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.spell-index a.active,
.spell-index a:hover {
    color: var(--ink-shadow);
    background: var(--spectral-mint);
    transform: translateY(-2px);
}

.bestiary-chamber {
    position: relative;
    min-height: 100vh;
    padding: clamp(5.2rem, 8vw, 8rem) clamp(1.2rem, 5vw, 5rem);
    display: grid;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.bestiary-chamber::before,
.bestiary-chamber::after {
    content: "";
    position: absolute;
    inset: 6% 4%;
    border: 1px solid rgba(167, 139, 250, .18);
    border-radius: 48% 52% 44% 56% / 18% 22% 78% 82%;
    pointer-events: none;
    z-index: -1;
}

.bestiary-chamber::after {
    inset: 14% 11%;
    border-color: rgba(124, 245, 198, .12);
    transform: rotate(-3deg);
}

.lambda-gate {
    grid-template-columns: 1.05fr .95fr;
    background: radial-gradient(ellipse at 50% 68%, rgba(94, 80, 134, .55), transparent 44%), linear-gradient(180deg, var(--ink-shadow), var(--deep-cave-violet));
}

.glyph-architecture {
    position: absolute;
    font-family: var(--display);
    font-weight: 800;
    color: rgba(167, 139, 250, .13);
    line-height: .8;
    user-select: none;
}

.lambda-arch {
    left: 2vw;
    bottom: -8vw;
    font-size: clamp(22rem, 51vw, 44rem);
    text-shadow: 0 0 80px rgba(167, 139, 250, .22);
}

.cave-mouth {
    position: relative;
    min-height: 64vh;
    clip-path: ellipse(31% 9% at 50% 92%);
    transition: clip-path 1.4s cubic-bezier(.2, .8, .1, 1), filter 1s ease;
    filter: drop-shadow(0 0 35px rgba(167, 139, 250, .18));
}

.cave-mouth.open { clip-path: ellipse(48% 48% at 50% 58%); }

.gate-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.draw-path {
    fill: none;
    stroke: var(--lambda-lavender);
    stroke-width: 3;
    stroke-dasharray: 1300;
    stroke-dashoffset: 1300;
    filter: drop-shadow(0 0 13px rgba(167, 139, 250, .8));
}

.gate-awake .draw-path { animation: pathDraw 2s ease forwards; }
.gate-awake .draw-path.slow { animation-delay: .26s; }
.gate-awake .draw-path.slower { animation-delay: .52s; }

@keyframes pathDraw { to { stroke-dashoffset: 0; } }

.ember-eyes {
    position: absolute;
    left: 50%;
    top: 47%;
    display: flex;
    gap: clamp(2.2rem, 6vw, 5rem);
    transform: translateX(-50%);
}

.ember-eyes span {
    width: clamp(1.1rem, 2vw, 1.7rem);
    height: clamp(.55rem, 1vw, .82rem);
    border-radius: 50%;
    background: var(--monster-ember);
    box-shadow: 0 0 18px var(--monster-ember), 0 0 46px rgba(255, 107, 74, .8);
    animation: blink 4.2s ease-in-out infinite;
}

@keyframes blink { 0%, 86%, 100% { transform: scaleY(1); } 90%, 94% { transform: scaleY(.08); } }

.gate-copy {
    position: relative;
    z-index: 4;
    max-width: 45rem;
    justify-self: end;
}

.parchment-fragment {
    padding: clamp(1.5rem, 4vw, 3.2rem);
    background: linear-gradient(135deg, rgba(244, 234, 210, .12), rgba(94, 80, 134, .08));
    border: 1px solid rgba(244, 234, 210, .24);
    border-radius: 2.2rem .8rem 2.8rem 1.2rem;
    box-shadow: inset 0 0 40px rgba(244, 234, 210, .035), 0 24px 80px rgba(0, 0, 0, .35);
}

.wordmark,
.chapter-mark {
    color: var(--spectral-mint);
    font: 600 .78rem/1 var(--code);
    letter-spacing: .18em;
    text-transform: uppercase;
}

h1,
h2 {
    margin: 0;
    font-family: var(--display);
    letter-spacing: -.05em;
    text-transform: uppercase;
}

h1 { font-size: clamp(3rem, 9vw, 8.8rem); line-height: .84; }
h2 { font-size: clamp(2.4rem, 7vw, 7rem); line-height: .88; color: var(--lambda-lavender); }

p {
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    line-height: 1.65;
}

.field-note,
.entry-panel p,
.final-entry p {
    font-family: var(--serif);
    font-size: clamp(1.18rem, 2vw, 1.65rem);
}

.sigil-button {
    margin: 1rem 0;
    border: 1px solid var(--spectral-mint);
    background: transparent;
    color: var(--spectral-mint);
    border-radius: 999px;
    padding: .9rem 1.25rem;
    font: 600 .8rem/1 var(--code);
    text-transform: uppercase;
    letter-spacing: .1em;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.sigil-button:hover {
    transform: translateY(-3px);
    background: rgba(124, 245, 198, .12);
    box-shadow: 0 0 28px rgba(124, 245, 198, .28);
}

.type-sigil,
.repl-note {
    white-space: pre-wrap;
    color: var(--spectral-mint);
    font: 600 clamp(.82rem, 1.3vw, 1rem)/1.75 var(--code);
    background: rgba(8, 6, 13, .58);
    border-left: 3px solid var(--spectral-mint);
    padding: 1rem;
    border-radius: .35rem 1.2rem 1.2rem .35rem;
}

.operator-constellation {
    position: absolute;
    right: 8vw;
    bottom: 8vh;
    color: rgba(216, 180, 90, .58);
    font: 600 clamp(.82rem, 1.4vw, 1.15rem)/1 var(--code);
    letter-spacing: .45em;
    transform: rotate(-4deg);
}

.entry-panel {
    position: relative;
    z-index: 3;
    max-width: 42rem;
    padding: clamp(1.4rem, 3vw, 2.5rem);
    background: rgba(23, 17, 38, .76);
    border: 1px solid rgba(244, 234, 210, .16);
    border-radius: 2rem;
}

.lazy-nest {
    grid-template-columns: .85fr 1.15fr;
    gap: 3rem;
    background: radial-gradient(circle at 72% 52%, rgba(216, 180, 90, .12), transparent 25rem), var(--deep-cave-violet);
}

.lazy-nest .chapter-mark { position: absolute; top: 18%; left: 6%; }

.lazy-beast {
    position: relative;
    height: min(55vw, 34rem);
    transform: translateY(2rem);
    opacity: .55;
    transition: transform 1.1s cubic-bezier(.2, .9, .2, 1), opacity 1.1s ease;
}

.lazy-beast.awake { transform: translateY(0); opacity: 1; }

.beast-back {
    position: absolute;
    right: 8%;
    bottom: 18%;
    width: 72%;
    height: 44%;
    border-radius: 55% 45% 18% 18%;
    background: linear-gradient(135deg, rgba(94, 80, 134, .95), rgba(8, 6, 13, .92));
    border: 1px dashed rgba(124, 245, 198, .45);
}

.beast-head {
    position: absolute;
    left: 4%;
    bottom: 18%;
    width: 30%;
    height: 28%;
    border-radius: 60% 35% 50% 42%;
    background: var(--haskell-plum);
}

.beast-head span {
    position: absolute;
    top: 38%;
    left: 38%;
    width: .75rem;
    height: .38rem;
    border-radius: 50%;
    background: var(--monster-ember);
    box-shadow: 0 0 18px var(--monster-ember);
}

.thunk-trail i {
    position: absolute;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    border: 1px solid var(--spectral-mint);
    animation: thunkFloat 3s ease-in-out infinite;
}
.thunk-trail i:nth-child(1) { left: 6%; top: 12%; }
.thunk-trail i:nth-child(2) { left: 20%; top: 22%; animation-delay: .25s; }
.thunk-trail i:nth-child(3) { left: 39%; top: 10%; animation-delay: .5s; }
.thunk-trail i:nth-child(4) { left: 58%; top: 23%; animation-delay: .75s; }
.thunk-trail i:nth-child(5) { left: 78%; top: 12%; animation-delay: 1s; }
@keyframes thunkFloat { 50% { transform: translateY(-1rem); opacity: .35; } }

.marginalia {
    position: absolute;
    max-width: 17rem;
    color: rgba(244, 234, 210, .72);
    font: italic 1.15rem/1.35 var(--serif);
    transform: rotate(-7deg);
    left: 7%;
    bottom: 10%;
}
.marginalia.right { left: auto; right: 8%; transform: rotate(5deg); }

.functor-aviary {
    grid-template-columns: .7fr 1.3fr;
    background: linear-gradient(110deg, var(--ink-shadow), var(--deep-cave-violet) 55%, rgba(94, 80, 134, .75));
}

.arrow-bridge {
    top: 20%;
    right: 3%;
    font-size: clamp(12rem, 30vw, 30rem);
}

.horizontal-encounter {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 70vw;
    align-items: center;
    justify-content: space-around;
    gap: 3rem;
    padding: 2rem;
}

.orb {
    width: clamp(4rem, 9vw, 7rem);
    height: clamp(4rem, 9vw, 7rem);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink-shadow);
    font: 800 2rem/1 var(--display);
    background: var(--spectral-mint);
    box-shadow: 0 0 50px rgba(124, 245, 198, .5);
    transition: transform .8s ease, background .8s ease;
}

.mapped { background: var(--typeclass-gold); }
.functor-aviary.in-view .original { transform: translateX(3rem) scale(.85); }
.functor-aviary.in-view .mapped { transform: translateX(-3rem) scale(1.08); }

.functor-bird {
    position: relative;
    width: clamp(16rem, 32vw, 30rem);
    height: clamp(11rem, 21vw, 18rem);
    animation: birdBob 4s ease-in-out infinite;
}
@keyframes birdBob { 50% { transform: translateY(-1rem) rotate(-1deg); } }

.bird-body {
    position: absolute;
    inset: 28% 30%;
    display: grid;
    place-items: center;
    border-radius: 50% 45% 52% 40%;
    background: var(--haskell-plum);
    color: var(--spectral-mint);
    font: 800 2.4rem/1 var(--display);
    box-shadow: inset 0 0 30px rgba(8, 6, 13, .5);
}

.wing {
    position: absolute;
    top: 20%;
    width: 42%;
    height: 55%;
    background: linear-gradient(135deg, rgba(167, 139, 250, .7), rgba(94, 80, 134, .25));
    clip-path: polygon(0 50%, 100% 0, 78% 50%, 100% 100%);
    transform-origin: 100% 50%;
    animation: wingBeat 1.8s ease-in-out infinite;
}
.left-wing { left: 0; }
.right-wing { right: 0; transform: scaleX(-1); transform-origin: 0 50%; }
@keyframes wingBeat { 50% { transform: rotate(8deg) translateY(.5rem); } }
.right-wing { animation-name: wingBeatRight; }
@keyframes wingBeatRight { 50% { transform: scaleX(-1) rotate(8deg) translateY(.5rem); } }
.claw { position: absolute; left: 48%; bottom: 4%; width: 2rem; height: 3rem; border-left: 2px solid var(--typeclass-gold); border-bottom: 2px solid var(--typeclass-gold); transform: rotate(-25deg); }

.monad-marsh {
    grid-template-columns: .8fr 1.2fr;
    background: radial-gradient(ellipse at 70% 74%, rgba(124, 245, 198, .18), transparent 24rem), linear-gradient(180deg, var(--deep-cave-violet), var(--ink-shadow));
}

.marsh-water {
    position: relative;
    height: 58vh;
    border-radius: 50% 40% 45% 55%;
    background: radial-gradient(ellipse at 50% 70%, rgba(124, 245, 198, .22), rgba(94, 80, 134, .2) 45%, rgba(8, 6, 13, .75) 72%);
    border: 1px solid rgba(124, 245, 198, .22);
    overflow: hidden;
}

.bind-chain {
    position: absolute;
    inset: 22% 6% auto;
    display: flex;
    justify-content: space-around;
    color: var(--spectral-mint);
    font: 800 clamp(1.1rem, 3vw, 2.3rem)/1 var(--code);
}

.bind-chain span { opacity: .36; transition: opacity .35s ease, transform .35s ease, text-shadow .35s ease; }
.bind-chain span.ripple { opacity: 1; transform: translateY(-.8rem) scale(1.1); text-shadow: 0 0 22px var(--spectral-mint); }

.marsh-creature {
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 8%;
    height: 42%;
    border-radius: 45% 55% 20% 20%;
    background: linear-gradient(135deg, var(--haskell-plum), var(--ink-shadow));
}
.marsh-creature span { position: absolute; top: 30%; width: .8rem; height: .8rem; border-radius: 50%; background: var(--monster-ember); box-shadow: 0 0 18px var(--monster-ember); }
.marsh-creature span:nth-child(1) { left: 34%; }
.marsh-creature span:nth-child(2) { left: 49%; }
.marsh-creature span:nth-child(3) { left: 64%; }

.typeclass-reliquary {
    grid-template-columns: 1fr 1fr;
    background: radial-gradient(circle at 50% 45%, rgba(216, 180, 90, .16), transparent 24rem), var(--deep-cave-violet);
}

.typeclass-reliquary .chapter-mark { position: absolute; top: 16%; right: 7%; }

.relic-monster {
    position: relative;
    justify-self: center;
    width: min(80vw, 34rem);
    height: min(80vw, 34rem);
}

.relic-body {
    position: absolute;
    inset: 12%;
    border-radius: 52% 48% 45% 55%;
    background: conic-gradient(from 130deg, var(--haskell-plum), var(--ink-shadow), var(--haskell-plum), var(--lambda-lavender));
    box-shadow: inset 0 0 60px rgba(8, 6, 13, .7), 0 0 70px rgba(167, 139, 250, .18);
}

.badge {
    position: absolute;
    border: 1px solid rgba(216, 180, 90, .7);
    background: var(--typeclass-gold);
    color: var(--ink-shadow);
    border-radius: 999px;
    padding: .7rem 1rem;
    font: 800 .88rem/1 var(--code);
    cursor: pointer;
    transition: transform .45s cubic-bezier(.2, 1.6, .35, 1), box-shadow .3s ease;
}
.badge:nth-of-type(1) { top: 2%; left: 20%; }
.badge:nth-of-type(2) { top: 18%; right: 2%; }
.badge:nth-of-type(3) { bottom: 18%; left: 2%; }
.badge:nth-of-type(4) { bottom: 2%; right: 16%; }
.badge.attached { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1.05); box-shadow: 0 0 24px rgba(216, 180, 90, .55); }

.fossil-line {
    position: absolute;
    left: 8%;
    bottom: 8%;
    color: rgba(244, 234, 210, .45);
    font: 600 clamp(.7rem, 1.7vw, 1.05rem)/1 var(--code);
    letter-spacing: .08em;
}

.repl-bonfire {
    place-items: center;
    text-align: center;
    background: radial-gradient(circle at 50% 64%, rgba(255, 107, 74, .26), transparent 16rem), linear-gradient(180deg, var(--ink-shadow), var(--deep-cave-violet));
}

.final-entry { position: relative; z-index: 3; max-width: 55rem; }
.final-entry h2 { color: var(--spellbook-parchment); }

.bonfire {
    position: absolute;
    bottom: 16%;
    left: 50%;
    width: 14rem;
    height: 14rem;
    transform: translateX(-50%);
    filter: blur(.1px) drop-shadow(0 0 50px rgba(255, 107, 74, .45));
}
.bonfire span { position: absolute; inset: 18%; border-radius: 55% 45% 55% 45%; background: var(--monster-ember); transform-origin: 50% 90%; animation: flame 1.7s ease-in-out infinite; mix-blend-mode: screen; }
.bonfire span:nth-child(2) { inset: 28%; background: var(--typeclass-gold); animation-delay: .25s; }
.bonfire span:nth-child(3) { inset: 40%; background: var(--spectral-mint); animation-delay: .5s; }
@keyframes flame { 50% { transform: scale(.8, 1.12) rotate(8deg); border-radius: 45% 55% 40% 60%; } }

.gathered-monsters i {
    position: absolute;
    bottom: 8%;
    width: 4rem;
    height: 5.5rem;
    border-radius: 50% 50% 20% 20%;
    background: var(--haskell-plum);
    box-shadow: inset 0 1rem 2rem rgba(8, 6, 13, .55);
}
.gathered-monsters i:nth-child(1) { left: 14%; }
.gathered-monsters i:nth-child(2) { left: 27%; transform: scale(.75); }
.gathered-monsters i:nth-child(3) { right: 27%; transform: scale(.82); }
.gathered-monsters i:nth-child(4) { right: 14%; }

.spark {
    position: absolute;
    left: var(--x);
    bottom: 24%;
    color: var(--spectral-mint);
    font: 700 .85rem/1 var(--code);
    animation: sparkRise 3.5s linear forwards;
    pointer-events: none;
}
@keyframes sparkRise { to { transform: translateY(-76vh) rotate(35deg); opacity: 0; } }

.in-view .entry-panel,
.in-view .final-entry { animation: blurReveal .9s ease both; }
@keyframes blurReveal { from { opacity: 0; filter: blur(10px); transform: translateY(1.6rem); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }

@media (max-width: 820px) {
    .spell-index { overflow-x: auto; justify-content: flex-start; }
    .spell-index a { flex: 0 0 auto; }
    .lambda-gate,
    .lazy-nest,
    .functor-aviary,
    .monad-marsh,
    .typeclass-reliquary { grid-template-columns: 1fr; }
    .gate-copy { justify-self: stretch; }
    .horizontal-encounter { min-width: 100%; gap: 1rem; padding: 1rem 0; }
    .marginalia { display: none; }
    .cursor-orb { display: none; }
}