::selection {
      background-color: #a10000;
      color: #000; 
    }
    h1.quote {
      font-family: 'Times New Roman', serif;
      font-style: italic;
      color: white;
      font-size: 1.832em;
      margin-top: 48px;
      margin-bottom: 24px;
      text-align: center;
    }
    .sigil-wrapper {
      position: relative;
      width: 768px;
      height: 768px;
      background:
        radial-gradient(circle, transparent 51%, rgba(255,255,255,.99) 52%, transparent 53%),
        radial-gradient(circle, transparent 62%, rgba(255,255,255,1) 62.3%, rgba(255,255,255,1) 63.8%, transparent 64%);
    }



    /* --- 'Dreamful Path' grid overlay --- */
    .dream-container{
        position:fixed;
        top:0;
        left:0;
        width:100vw;
        height:100vh;
        pointer-events:none;
        z-index:-2;     
        perspective: 100px;
        }


    .dream-containerFore{
        position:fixed;
        top:600px;
        left:0;
        width:100vw;
        height:100vh;
        pointer-events:none;
        z-index:-1;
        perspective:50px;
        }


    .dream-containerFar{
        position:fixed;
        top:0;
        left:0;
        width:100vw;
        height:100vh;
        pointer-events:none;
        z-index:-3;
        perspective:800px;
        }
   

    .grid-layer {
      position: absolute;
      width: 200vmax;
      height: 200vmax;
      top: -100vh;
      left: -50vw;
      background-size: 246px 382px;
      transform-origin: center bottom;
      transform: rotateX(2deg);
      pointer-events: none;
      animation: gridScroll 36s linear infinite;
    }

    .grid-layerFore {
      position: absolute;
      width: 200vw;
      height: 200vh;
      top: -145vh;
      left: -25vw;
      background-size: 480px 542px;
      transform: rotateX(1.14deg);
      pointer-events: none;
      animation: gridShake 18s linear infinite;
    }

    .grid-layerFar {
      position: absolute;
      width: 300vmax;
      height: 300vmax;
      top: -75vh;
      left: -45vw;
      background-size: 104px 104px;
      transform-origin: center;
      transform: rotateX(15deg);
      pointer-events: none;
      animation: gridScroll 96s linear infinite;
    }



    .grid {
      background-image:
        linear-gradient(to right, rgba(64,32,255,0.3) 13px, transparent 1px),
        linear-gradient(to top, rgba(64,32,255,0.3) 12px, transparent 1px);
        filter: blur(2px) brightness(.9);
    }

    .grid-Fore {
      background-image:
        linear-gradient(to right, rgba(64,32,255,0.2) 32px, transparent 1px),
        linear-gradient(to top, rgba(64,32,255,0.2) 28px, transparent 1px);
      filter: blur(4px) brightness(.9);
    }

    .grid-Far {
      background-image:
        linear-gradient(to right, rgba(64,32,255,0.15) 6px, transparent 1px),
        linear-gradient(to top, rgba(64,32,255,0.15) 6px, transparent 1px);
      filter: blur(1px) brightness(.9);
    }


    @keyframes gridScroll {
      from { background-position: 0 0; }
      to { background-position: 0 768px; }
    }


    @keyframes gridShake {
    0% {
        background-position: 0 0;
    }
    25% {
        background-position: 110px 192px;
    }
    50% {
        background-position: 0px 384px;
    }
    75% {
        background-position: -110px 676px;
    }
    100% {
        background-position: 0px 1088px;
    }
}



    .pulse-light {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 332px;
      height: 332px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(181, 21, 21, 0.64) 0%, transparent 70%);
      animation: pulseLight 2.5s ease-in-out infinite;
      transform: translate(-50%, -50%);
      z-index: 0;
    }
    .glyph:hover { animation: pulse 5s infinite; }
    .layer {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .text-ring {
      width: 688px;
      height: 688px;
      z-index: 2;
      filter: drop-shadow(3px 3px 0px #ff2106) drop-shadow(3px 3px 0px #a10000);
      animation: spin 132s infinite;
    }
    .octa {
      width: 576px;
      height: 576px;
      z-index: 3;
      filter: drop-shadow(3px 0px 2px #dedede) drop-shadow(-3px 0px 2px #dedede);
    }
    .glyph {
      width: 256px;
      height: 256px;
      z-index: 4;
      transform: translate(calc(-50% + var(--x-offset, 0px)), calc(-50% + var(--y-offset, 0px))) scale(1);
    }
    @keyframes spin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }
    @keyframes pulse {
      0%, 100% { opacity: 0.8; transform: translate(calc(-50% + var(--x-offset, 0px)), calc(-50% + var(--y-offset, 0px))) scale(1); }
      50% { opacity: 1; transform: translate(calc(-50% + var(--x-offset, 0px)), calc(-50% + var(--y-offset, 0px))) scale(1.05); }
    }
    @keyframes pulseLight {
      0%, 100% {opacity: 0.5; }
      50% { opacity: 1; }
    }
    .meijjy-dokkan {
      position: absolute;
      bottom: 15%;
      left: 15%;
      pointer-events: none;
    }
    #meji-moon {
      position: absolute;
      bottom: 15%;
      right: 15%;
      width: 300px;
      height: 300px;
      pointer-events: none;
      transform: rotateY(180deg);
    }
    #meji-moon img {
      width: 100%;
      height: 100%;
    }