html, body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }
       
        * {
            scrollbar-width: thin;
            scrollbar-color: #9D8DB5 #1a1a2e;
        }
       
        ::-webkit-scrollbar {
            width: 8px;
        }
       
        ::-webkit-scrollbar-track {
            background: #1a1a2e;
        }
       
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(45deg, #9D8DB5, #8C7CA0);
            border-radius: 4px;
        }
       
        .fantasy-bg {
            background: radial-gradient(ellipse at top, #0f0f23 0%, #16213e 25%, #0f172a 50%, #1a1a2e 100%);
            position: relative;
            min-height: 100vh;
            overflow-x: hidden;
            overflow-y: visible;
        }
        
        body > .flex.flex-col {
            position: relative;
            z-index: 10;
            min-height: 100vh;
        }
       
        .fantasy-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(140, 124, 160, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
            animation: mysticalGlow 8s ease-in-out infinite alternate;
        }
       
        @keyframes mysticalGlow {
            0% { opacity: 0.5; transform: scale(1); }
            100% { opacity: 0.8; transform: scale(1.1); }
        }
       
        .floating-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 1;
        }
       
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: radial-gradient(circle, #fbbf24, transparent);
            border-radius: 50%;
            animation: float 6s infinite linear;
        }
       
        @keyframes float {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
        }
       
        .page {
            display: none;
            animation: fadeIn 0.6s ease-in-out;
        }
       
        .page.active {
            display: block;
        }
       
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
       
        .nav-link {
            position: relative;
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(124, 58, 237, 0.3);
            backdrop-filter: blur(10px);
            transition: all 0.4s ease;
            width: 220px;
            flex-shrink: 0;
        }
       
        .nav-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, #9D8DB5, #8C91B3, #6D9DB0);
            opacity: 0;
            transition: opacity 0.4s ease;
            border-radius: inherit;
        }
       
        .nav-link:hover::before,
        .nav-link.active::before {
            opacity: 1;
        }
       
        .nav-link span {
            position: relative;
            z-index: 1;
            white-space: nowrap;
        }
       
        .nav-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
        }
       
        .mystical-card {
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(124, 58, 237, 0.4);
            backdrop-filter: blur(15px);
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }
       
        .mystical-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #9D8DB5, #8C7CA0, #6D9DB0, #9D8DB5);
            z-index: -1;
            border-radius: inherit;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
       
        .mystical-card:hover::before {
            opacity: 1;
        }
       
        .mystical-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 40px rgba(124, 58, 237, 0.3);
        }
       
        .book-cover {
            background: linear-gradient(135deg, #1e1b4b, #312e81, #1e1b4b);
            border: 2px solid #9D8DB5;
            position: relative;
            overflow: hidden;
        }
       
        .book-cover::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s ease;
        }
       
        .book-cover:hover::after {
            left: 100%;
        }
       
        .glow-text {
            text-shadow: 0 0 10px rgba(124, 58, 237, 0.5), 0 0 20px rgba(124, 58, 237, 0.3);
        }
       
        .epic-title {
            font-family: 'Cinzel', serif;
            background: linear-gradient(45deg, #fbbf24, #f59e0b, #d97706);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
        }
       
        .mystical-input {
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(124, 58, 237, 0.4);
            color: #e2e8f0;
            transition: all 0.3s ease;
        }
       
        .mystical-input:focus {
            border-color: #9D8DB5;
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2), 0 0 15px rgba(124, 58, 237, 0.3);
            outline: none;
        }
       
        .mystical-button {
            background: linear-gradient(45deg, #9D8DB5, #8C7CA0);
            border: none;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
       
        .mystical-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s ease;
        }
       
        .mystical-button:hover::before {
            left: 100%;
        }
       
        .mystical-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
        }
       
        .blog-post {
            background: rgba(15, 23, 42, 0.8);
            border-left: 4px solid #6D9DB0;
            backdrop-filter: blur(10px);
            transition: all 0.4s ease;
            position: relative;
        }
       
        .blog-post::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 0;
            background: linear-gradient(45deg, #6D9DB0, #5D8DA0);
            transition: width 0.4s ease;
        }
       
        .blog-post:hover::before {
            width: 6px;
        }
       
        .blog-post:hover {
            transform: translateX(12px);
            box-shadow: 0 8px 25px rgba(6, 182, 212, 0.2);
        }
       
        .rune-decoration {
            font-family: 'Cinzel', serif;
            color: #9D8DB5;
            opacity: 0.6;
            font-size: 1.5rem;
            animation: runeGlow 3s ease-in-out infinite alternate;
        }
       
        @keyframes runeGlow {
            0% { opacity: 0.4; text-shadow: 0 0 5px rgba(124, 58, 237, 0.3); }
            100% { opacity: 0.8; text-shadow: 0 0 15px rgba(124, 58, 237, 0.6); }
        }
       
        .book-preview-container {
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(124, 58, 237, 0.3);
        }
       
        #preview-darkness-whispers {
            animation: fadeIn 0.4s ease-in-out;
        }
       
        #blog-post-modal {
            animation: fadeIn 0.3s ease-in-out;
        }
        
        /* Disable hover effects on blog modal content */
        #blog-post-modal .mystical-card {
            transform: none !important;
            box-shadow: none !important;
        }
        
        #blog-post-modal .mystical-card::before {
            display: none !important;
        }
        
        #blog-post-modal .mystical-card:hover {
            transform: none !important;
            box-shadow: none !important;
        }
        
        #blog-post-modal .mystical-card:hover::before {
            display: none !important;
            opacity: 0 !important;
        }
       
        #blog-post-modal .prose {
            color: rgb(203, 213, 225);
        }
       
        #blog-post-modal .prose h1,
        #blog-post-modal .prose h2,
        #blog-post-modal .prose h3 {
            color: rgb(241, 245, 249);
            font-weight: bold;
            margin-top: 1.5em;
            margin-bottom: 0.5em;
        }
       
        #blog-post-modal .prose p {
            margin-bottom: 1em;
        }
       
        #blog-post-modal .prose a {
            color: #6D9DB0;
            text-decoration: underline;
        }
       
        #blog-post-modal .prose a:hover {
            color: #7EADC0;
        }
       
        #blog-post-modal .prose strong {
            color: rgb(241, 245, 249);
            font-weight: bold;
        }
       
        #blog-post-modal .prose ul,
        #blog-post-modal .prose ol {
            margin-left: 1.5em;
            margin-bottom: 1em;
        }
       
        #blog-post-modal .prose li {
            margin-bottom: 0.5em;
        }
       
        .fog-container {
            position: absolute;
            inset: 0;
            overflow: hidden;
            border-radius: inherit;
            z-index: 1;
        }
       
        .mist-layer {
            position: absolute;
            width: 200%;
            height: 120%;
            background: radial-gradient(ellipse at center, rgba(220, 200, 255, 0.5) 0%, rgba(200, 180, 255, 0.35) 25%, rgba(180, 160, 255, 0.25) 40%, rgba(160, 140, 255, 0.15) 55%, transparent 80%);
            border-radius: 50%;
            filter: blur(35px);
            animation: mistFloat 20s ease-in-out infinite;
        }
       
        .mist-layer:nth-child(1) {
            top: -30%;
            left: -40%;
            animation-delay: 0s;
            animation-duration: 25s;
        }
       
        .mist-layer:nth-child(2) {
            top: 20%;
            right: -30%;
            animation-delay: -5s;
            animation-duration: 22s;
        }
       
        .mist-layer:nth-child(3) {
            bottom: -25%;
            left: 10%;
            animation-delay: -10s;
            animation-duration: 28s;
        }
       
        .mist-layer:nth-child(4) {
            top: 50%;
            left: -20%;
            animation-delay: -15s;
            animation-duration: 24s;
        }
       
        @keyframes mistFloat {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0.5;
            }
            25% {
                transform: translate(40px, -30px) scale(1.1);
                opacity: 0.8;
            }
            50% {
                transform: translate(-30px, 40px) scale(0.9);
                opacity: 0.7;
            }
            75% {
                transform: translate(50px, 20px) scale(1.05);
                opacity: 0.9;
            }
            100% {
                transform: translate(0, 0) scale(1);
                opacity: 0.5;
            }
        }
       
        .moors-image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            z-index: 2;
            opacity: 0.85;
            mix-blend-mode: multiply;
        }

/* ===== 404 dragon cartouche ===== */
.dragon-cartouche {
    width: 100%;
    max-width: 420px;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55));
    animation: cartoucheFloat 9s ease-in-out infinite;
}
.dragon-cartouche svg,
.dragon-cartouche img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}
.dragon-cartouche img {
    box-shadow:
        0 0 0 1px rgba(58, 40, 16, 0.6),
        0 12px 32px rgba(0, 0, 0, 0.6);
}
.dragon-cartouche svg > g[filter="url(#inkEdge)"] {
    transform-origin: 340px 220px;
    animation: dragonBreathe 6s ease-in-out infinite;
}
@keyframes cartoucheFloat {
    0%,100% { transform: translateY(0) rotate(-0.4deg); }
    50%     { transform: translateY(-6px) rotate(0.4deg); }
}
@keyframes dragonBreathe {
    0%,100% { transform: scale(1)    translateY(0); }
    50%     { transform: scale(1.015) translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    .dragon-cartouche,
    .dragon-cartouche svg > g[filter="url(#inkEdge)"] { animation: none; }
}

/* ===== Full-page drifting mist (used on 404) ===== */
.mist-fullpage {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 20;
}

.mist-band {
    position: absolute;
    left: -50%;
    width: 200%;
    height: 55%;
    background: radial-gradient(ellipse at center,
        rgba(230, 225, 240, 0.55) 0%,
        rgba(210, 205, 230, 0.38) 25%,
        rgba(180, 180, 210, 0.22) 45%,
        rgba(150, 150, 190, 0.10) 65%,
        transparent 85%);
    filter: blur(55px);
    will-change: transform, opacity;
}

.mist-band.b1 {
    top: -10%;
    animation: mistDrift1 38s ease-in-out infinite;
}
.mist-band.b2 {
    top: 20%;
    animation: mistDrift2 52s ease-in-out infinite;
}
.mist-band.b3 {
    top: 45%;
    animation: mistDrift3 44s ease-in-out infinite;
}
.mist-band.b4 {
    top: 65%;
    animation: mistDrift4 60s ease-in-out infinite;
}

@keyframes mistDrift1 {
    0%,100% { transform: translate(-8%, 0) scale(1);     opacity: 0.35; }
    25%     { transform: translate(6%, -4%) scale(1.15); opacity: 0.75; }
    50%     { transform: translate(12%, 2%) scale(1.05); opacity: 0.95; }
    75%     { transform: translate(2%, 5%) scale(1.1);   opacity: 0.55; }
}
@keyframes mistDrift2 {
    0%,100% { transform: translate(5%, 0) scale(1.05);    opacity: 0.25; }
    30%     { transform: translate(-10%, 3%) scale(1.2);  opacity: 0.9; }
    60%     { transform: translate(-4%, -3%) scale(0.95); opacity: 0.5; }
}
@keyframes mistDrift3 {
    0%,100% { transform: translate(-4%, 2%) scale(1);     opacity: 0.3; }
    35%     { transform: translate(10%, -2%) scale(1.1);  opacity: 0.85; }
    70%     { transform: translate(4%, 4%) scale(1.15);   opacity: 0.6; }
}
@keyframes mistDrift4 {
    0%,100% { transform: translate(8%, 0) scale(1.1);    opacity: 0.4; }
    40%     { transform: translate(-6%, -3%) scale(1);   opacity: 0.8; }
    80%     { transform: translate(-12%, 2%) scale(1.2); opacity: 0.55; }
}

/* Thick sweeping veil that occasionally passes over the whole page */
.mist-veil {
    position: absolute;
    inset: -20% -50%;
    background: linear-gradient(100deg,
        transparent 0%,
        transparent 25%,
        rgba(220, 220, 240, 0.45) 45%,
        rgba(230, 225, 245, 0.60) 55%,
        rgba(220, 220, 240, 0.40) 65%,
        transparent 85%,
        transparent 100%);
    filter: blur(40px);
    animation: mistSweep 22s ease-in-out infinite;
}
.mist-veil.v2 {
    animation: mistSweep 34s ease-in-out infinite;
    animation-delay: -14s;
    opacity: 0.7;
}

@keyframes mistSweep {
    0%   { transform: translateX(-60%) translateY(-5%); opacity: 0; }
    15%  { opacity: 0.6; }
    50%  { transform: translateX(10%) translateY(2%);   opacity: 0.95; }
    85%  { opacity: 0.5; }
    100% { transform: translateX(60%) translateY(-3%);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mist-band, .mist-veil { animation: none; opacity: 0.4; }
}

@view-transition { navigation: auto; }