@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Electrolize&display=swap');
     
    *, *::before, *::after {
      box-sizing: border-box;
    }
    
    html {
      height: 100%;
    }
    body {
      
      background-color: white;
      color: black;
      font-family: 'Electrolize', sans-serif;
      min-height: 100%;
      margin: 0;
    }
     
    pre {
      font-family: 'Electrolize', sans-serif;
      font-size: 12pt;  
      line-height: 1.5; 
      white-space: pre-wrap;  
    }
     
    .page-wrapper {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        min-height: 100%; 
        font-size: 12pt;
    }
     
    body.iframe-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }
    
    body.iframe-content .page-wrapper {
      min-height: initial;  
    }
    
    
    /* --- Header Styles --- */
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Audiowide', sans-serif;
    }
    
     
    h1 { font-size: 2em; }    
    h2 { font-size: 1.5em; }  
    h3 { font-size: 1.17em; } 
    h4 { font-size: 1em; }    
    h5 { font-size: 0.83em; }  
    h6 { font-size: 0.67em; }  
    
     
    [data-open-window] {
        cursor: pointer;
    }
     
    a, a:visited { 
      position: relative;
      text-transform: uppercase;
      font-family: 'Audiowide', sans-serif;
      color: black;
      text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
      animation: interference 2s infinite steps(1);
      animation-delay: var(--interference-delay, 0s);
      text-decoration: none;
      display: inline-block;  
      font-weight: bold;
    }
     
    a:focus, a:hover {
        outline: none;
    }
    
    a::before,
    a::after { 
      content: attr(data-text);  
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: black;
      background: white;
      overflow: hidden;
      text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    }
    
    a::before {
      animation: slice 2.5s infinite steps(10);
      animation-delay: var(--slice-delay-1, 0s);
    }
    
    a::after {
      animation: slice 3s infinite steps(5) reverse;
      animation-delay: var(--slice-delay-2, 0s);
    }
     
    img { 
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    }
     
    @keyframes flicker-in {
      0% { opacity: 0; filter: brightness(1.5); }
      10% { opacity: 0.3; filter: brightness(0.8); }
      20% { opacity: 0.1; filter: brightness(1.2); }
      30% { opacity: 0.6; }
      50% { opacity: 0.2; }
      70% { opacity: 0.8; filter: brightness(2); }
      100% { opacity: 1; filter: brightness(1); }
    }
     
    @keyframes static-glow-large {
      from {
        box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.7), 
                    0 0 10px 10px rgba(0, 0, 0, 0.7);
      }
      to {
        box-shadow: 0 0 35px 22px rgba(0, 0, 0, 0.75), 
                    0 0 12px 11px rgba(0, 0, 0, 0.75);
      }
    }
    
    /* --- Modal Window Styles --- */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 1000;
      display: none;  
    }
    
    body.windows-active .modal-overlay {
        display: block;
        pointer-events: auto;
    }
    body.windows-defocused .modal-overlay {
        display: block;
        pointer-events: none;  
    }
     
    .modal-container {
      position: fixed;
      min-width: 300px;
      min-height: 200px;
      background-color: #fff;
      border: none;  
      display: flex;
      flex-direction: column;
      overflow: visible; 
      animation: flicker-in 0.7s forwards, static-glow-large 2s infinite alternate;
    }
    
     
    .modal-container.defocused {
       
    }
    
     
    .modal-container.active {
      
    }
    
     
    .modal-header {
      height: 40px;
      background-color: #fff;  
      color: #000;
      padding: 0 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: move;
      border-bottom: none;  
      flex-shrink: 0;
      overflow: hidden;
      position: relative; / 
    }
    
     
    .modal-header::after {
      display: none;
    }
    
    .modal-container.active .modal-header {
        border-bottom-color: transparent;  
    }
    
    .modal-title {
      position: relative;
      font-weight: bold;
      text-transform: uppercase;
      color: #000;
      text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
      animation: interference 2s infinite steps(1);
      font-family: 'Audiowide', sans-serif;
    }
    
    .modal-title::before,
    .modal-title::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: #000;
      background: #fff;  
      overflow: hidden;
      text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    }
    
    .modal-title::before {
      animation: slice 2.5s infinite steps(10);
    }
    
    .modal-title::after {
      animation: slice 3s infinite steps(5) reverse;
    }
    
    @keyframes interference {
      0% { opacity: 1; } 48% { opacity: 1; } 50% { opacity: 0.6; } 52% { opacity: 1; }
      55% { opacity: 0.8; } 56% { opacity: 1; } 100% { opacity: 1; }
    }
    
    @keyframes slice {
      0% { clip-path: inset(50% 0 50% 0); } 5% { clip-path: inset(20% 0 40% 0); }
      10% { clip-path: inset(80% 0 5% 0); } 15% { clip-path: inset(40% 0 20% 0); }
      20% { clip-path: inset(95% 0 2% 0); } 25% { clip-path: inset(60% 0 30% 0); }
      30% { clip-path: inset(98% 0 1% 0); } 35% { clip-path: inset(10% 0 80% 0); }
      40% { clip-path: inset(70% 0 25% 0); } 45% { clip-path: inset(2% 0 90% 0); }
      50% { clip-path: inset(45% 0 45% 0); } 55% { clip-path: inset(85% 0 10% 0); }
      60% { clip-path: inset(30% 0 65% 0); } 65% { clip-path: inset(90% 0 8% 0); }
      70% { clip-path: inset(40% 0 50% 0); } 75% { clip-path: inset(15% 0 75% 0); }
      80% { clip-path: inset(92% 0 5% 0); } 85% { clip-path: inset(55% 0 35% 0); }
      90% { clip-path: inset(5% 0 85% 0); } 95% { clip-path: inset(65% 0 30% 0); }
      100% { clip-path: inset(50% 0 50% 0); }
    }
    
    .modal-close-btn {
      position: relative;
      width: 30px;
      height: 30px;
      background: transparent;
      color: #000;
      font-family: 'Audiowide', sans-serif;
      font-size: 26px;
      font-weight: normal;
      border: none;
      cursor: pointer;
      text-shadow: 0 0 8px rgba(0,0,0,0.7);
      transition: all 0.1s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 4px;
    }
    
    .modal-close-btn:hover {
      color: transparent;
      animation: none;
    }
    
    .modal-close-btn::before,
    .modal-close-btn::after {
      content: '×';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: #000;
      display: none;
      align-items: center;
      justify-content: center;
      font-family: 'Audiowide', sans-serif;
      padding-bottom: 4px;
    }
    
    .modal-close-btn:hover::before {
      display: flex;
      animation: close-glitch-1 0.8s infinite steps(1);
    }
    .modal-close-btn:hover::after {
      display: flex;
      animation: close-glitch-2 0.8s infinite steps(1) reverse;
    }
    
    @keyframes close-glitch-1 {
      0% { clip-path: inset(50% 0 30% 0); transform: translate(-4px, -2px); filter: blur(2px); }
      20% { clip-path: inset(10% 0 85% 0); transform: translate(3px, 3px); filter: blur(0px); }
      40% { clip-path: inset(70% 0 5% 0); transform: translate(-2px, 4px); filter: blur(1px); }
      60% { clip-path: inset(30% 0 60% 0); transform: translate(5px, -3px); filter: blur(3px); }
      80% { clip-path: inset(90% 0 2% 0); transform: translate(-3px, 1px); filter: blur(0px); }
      100% { clip-path: inset(40% 0 45% 0); transform: translate(2px, -1px); filter: blur(2px); }
    }
    
    @keyframes close-glitch-2 {
      0% { clip-path: inset(25% 0 70% 0); transform: translate(3px, 1px); filter: blur(0px); }
      20% { clip-path: inset(95% 0 2% 0); transform: translate(-4px, -3px); filter: blur(3px); }
      40% { clip-path: inset(15% 0 80% 0); transform: translate(2px, -2px); filter: blur(1px); }
      60% { clip-path: inset(65% 0 20% 0); transform: translate(-3px, 2px); filter: blur(0px); }
      80% { clip-path: inset(5% 0 90% 0); transform: translate(5px, 4px); filter: blur(2px); }
      100% { clip-path: inset(55% 0 30% 0); transform: translate(-2px, -3px); filter: blur(1px); }
    }
    
    .modal-content-area {
        width: 100%;
        flex-grow: 1;
        overflow-y: auto;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        position: relative;
        color: black;
        font-family: 'Electrolize', sans-serif;
        font-size: 12pt;
        -webkit-mask-image: linear-gradient(transparent, black 30px, black calc(100% - 30px), transparent);
        mask-image: linear-gradient(transparent, black 30px, black calc(100% - 30px), transparent); 
    }
     
    
    .modal-iframe {
      width: 100%;
      border: none;
      flex-grow: 1;
    }
    
    .modal-resize-handle {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 15px;
      height: 15px;
      background: transparent;
      cursor: nwse-resize;
      border-right: 3px solid #888;
      border-bottom: 3px solid #888;
      transition: border-color 0.1s ease;
      z-index: 3;
    }
    
    .modal-container.active .modal-resize-handle {
        border-color: #000;
    }
    
    .modal-resize-handle:hover {
        border-color: transparent;
    }
    
    .modal-resize-handle:hover::before,
    .modal-resize-handle:hover::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        border-right: 3px solid #000;
        border-bottom: 3px solid #000;
    }
    
    .modal-resize-handle:hover::before {
        animation: close-glitch-1 0.8s infinite steps(1);
    }
    
    .modal-resize-handle:hover::after {
        animation: close-glitch-2 0.8s infinite steps(1) reverse;
    }
     
    html {
      scrollbar-width: none;
    }
    
    body::-webkit-scrollbar {
      display: none;
    }
    
    .modal-content-area {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .modal-content-area::-webkit-scrollbar {
      display: none;
    }
    
    /* --- UPDATED: Super Glitch Text Styles --- */
    .glitch-text {
      display: inline-flex;
      white-space: pre-wrap;
      flex-wrap: wrap;
    }
    
    .glitch-text > span {
      position: relative;
      display: inline-block;
      animation: super-glitch 0.8s infinite steps(1, end);
      animation-delay: var(--glitch-delay, 0s);
    }
    
    @keyframes super-glitch {
      0% {
        transform: translate(0, 0);
        clip-path: inset(30% 0 60% 0);
        text-shadow: -1px 1px 0 #ff00c1, 1px -1px 0 #00fff9;
      }
      10% {
        transform: translate(-2px, 3px);
        clip-path: inset(10% 0 85% 0);
      }
      20% {
        transform: translate(3px, -1px);
        clip-path: inset(75% 0 5% 0);
        text-shadow: 1px 1px 0 #ff00c1, -1px -1px 0 #00fff9;
      }
      30% {
        transform: translate(-4px, 2px);
        clip-path: inset(40% 0 40% 0);
      }
      40% {
        transform: translate(2px, -3px);
        clip-path: inset(90% 0 2% 0);
        text-shadow: 1px -1px 0 #ff00c1, -1px 1px 0 #00fff9;
      }
      50% {
        transform: translate(-1px, 4px);
        clip-path: inset(20% 0 75% 0);
      }
      60% {
        transform: translate(4px, 1px);
        clip-path: inset(65% 0 15% 0);
        text-shadow: -1px -1px 0 #ff00c1, 1px 1px 0 #00fff9;
      }
      70% {
        transform: translate(-2px, -2px);
        clip-path: inset(5% 0 90% 0);
      }
      80% {
        transform: translate(1px, 3px);
        clip-path: inset(80% 0 10% 0);
        text-shadow: -1px 1px 0 #ff00c1, 1px -1px 0 #00fff9;
      }
      90% {
        transform: translate(-3px, -1px);
        clip-path: inset(30% 0 55% 0);
      }
      100% {
        transform: translate(0, 0);
        clip-path: inset(50% 0 30% 0);
        text-shadow: 1px 1px 0 #ff00c1, -1px -1px 0 #00fff9;
      }
    }