Diferencias

Muestra las diferencias entre dos versiones de la página.

--- en:start [2026/04/26 12:00] – jesus
+++ en:start [2026/05/18 08:06] (actual) – jesus
@@ Línea 20: / Línea 20: @@
 <html>
 <style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+  /* --- CRT ULTRA-RETRO VISUAL ENGINE --- */
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+  .pcw-monitor-ultra {
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    background-color: #000b00;
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+    border: 12px solid #2a2a2a;
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+    border-radius: 15px;
+    padding: 25px;
+    margin: 25px 0;
+    font-family: 'Courier New', Courier, monospace;
+    position: relative;
+    overflow: hidden;
+    box-shadow: inset 0 0 60px rgba(0,255,0,0.15), 0 10px 30px rgba(0,0,0,0.7);
+  }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+  /* Scanlines and flicker effect */
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+  .pcw-monitor-ultra::after {
-</style>
+    content: " ";
+    position: absolute;
+    top: 0; left: 0; bottom: 0; right: 0;
+    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%),
+                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
+    background-size: 100% 3px, 2px 100%;
+    z-index: 2;
+    pointer-events: none;
+    animation: flickering 0.15s infinite;
+  }
-<div class="pcw-monitor">
+  @keyframes flickering { 0% { opacity: 0.98; } 100% { opacity: 1; } }
-  <div class="pcw-title"> > HARDWARE </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=en:hardware:expansions" class="pcw-btn">EXPANSIONS</a>
-    <a href="doku.php?id=en:hardware:gate_array" class="pcw-btn">GATE ARRAY</a>
-    <a href="doku.php?id=en:hardware:new_developments" class="pcw-btn">NEW DEVELOPMENTS</a>
-    <a href="doku.php?id=en:hardware:pinouts" class="pcw-btn">PINOUTS</a>
-    <a href="doku.php?id=en:hardware:peripherals" class="pcw-btn">PERIPHERALS</a>
-    <a href="doku.php?id=en:hardware:motherboards" class="pcw-btn">MOTHERBOARDS</a>
-    <a href="doku.php?id=en:hardware:monitor_boards" class="pcw-btn">MONITOR BOARDS</a>
-    <a href="doku.php?id=en:hardware:keyboard_boards" class="pcw-btn">KEYBOARD BOARDS</a>
-    <a href="doku.php?id=en:hardware:printer_boards" class="pcw-btn">PRINTER BOARDS</a>
-    <a href="doku.php?id=en:hardware:daisy_wheels" class="pcw-btn">DAISY WHEELS</a>
-    <a href="doku.php?id=en:hardware:disk_drives" class="pcw-btn">DISK DRIVES</a>
-  </div>
-</div>
-</html>
-----
+  /* Retro Text Style (Green Glow) */
+  .retro-text {
+    color: #00ff00 !important;
+    font-family: 'Courier New', Courier, monospace;
+    text-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 2px rgba(0, 255, 0, 0.8);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    text-decoration: none !important;
+  }
-<html>
+  .pcw-title-ultra {
-<style>
+    font-size: 1.6em;
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    font-weight: bold;
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    margin-bottom: 25px;
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    display: block;
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+  }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+  .pcw-title-ultra::after {
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+    content: "_";
-</style>
+    animation: cursor-blink 1s infinite;
+  }
-<div class="pcw-monitor">
+  @keyframes cursor-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
-  <div class="pcw-title"> > SOFTWARE </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=en:software:applications" class="pcw-btn">APPLICATIONS</a>
-    <a href="doku.php?id=en:software:companies" class="pcw-btn">COMPANIES</a>
-    <a href="doku.php?id=en:software:games" class="pcw-btn">GAMES</a>
-    <a href="doku.php?id=en:software:new_developments" class="pcw-btn">NEW DEVELOPMENTS</a>
-    <a href="doku.php?id=en:software:system" class="pcw-btn">SYSTEM</a>
-  </div>
-</div>
-</html>
-----
+  /* Grid and Commands (Buttons) */
+  .pcw-grid-ultra {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: repeat(3, 1fr);
+    position: relative;
+    z-index: 3;
+  }
-<html>
+  .pcw-btn-ultra {
-<style>
+    display: flex;
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    align-items: center;
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    justify-content: flex-start;
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    background: transparent;
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+    padding: 8px 5px;
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+    border: 1px solid transparent;
+    font-weight: bold;
+    font-size: 1em;
+    transition: 0.2s;
+  }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+  /* Hover effect: Pointer and Slide */
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+  .pcw-btn-ultra:hover {
-</style>
+    background-color: rgba(0, 255, 0, 0.15);
+    border: 1px solid rgba(0, 255, 0, 0.5);
+    transform: translateX(8px);
+  }
-<div class="pcw-monitor">
+  .pcw-btn-ultra::before {
-  <div class="pcw-title"> > CATALOGUES </div>
+    content: "> ";
+    opacity: 0.4;
-  <div class="pcw-grid" style="grid-template-columns: 1fr;">
+    margin-right: 5px;
-    <a href="doku.php?id=en:catalogues:start" class="pcw-btn">ACCESS</a>
+  }
-  </div>
-</div>
-</html>
-----
+  .pcw-btn-ultra:hover::before {
+    opacity: 1;
+  }
-<html>
+  /* Column variants */
-<style>
+  .col-2 { grid-template-columns: repeat(2, 1fr); }
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+  .col-1 { grid-template-columns: 1fr; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 850px) { .pcw-grid-ultra { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+  @media (max-width: 480px) { .pcw-grid-ultra { grid-template-columns: 1fr !important; } }
 </style>
-<div class="pcw-monitor">
+<!-- 1. HARDWARE -->
-  <div class="pcw-title"> > EMULATORS </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> HARDWARE </div>
-  <div class="pcw-grid">
+  <div class="pcw-grid-ultra">
-    <a href="doku.php?id=en:emulators:introduction" class="pcw-btn">INTRODUCTION</a>
+    <a href="doku.php?id=en:hardware:expansions" class="pcw-btn-ultra retro-text">EXPANSIONS</a>
-    <a href="doku.php?id=en:emulators:spanish" class="pcw-btn">SPANISH</a>
+    <a href="doku.php?id=en:hardware:gate_array" class="pcw-btn-ultra retro-text">GATE ARRAY</a>
-    <a href="doku.php?id=en:emulators:english" class="pcw-btn">ENGLISH</a>
+    <a href="doku.php?id=en:hardware:new_developments" class="pcw-btn-ultra retro-text">NEW DEVELOPMENTS</a>
-    <a href="doku.php?id=en:emulators:international" class="pcw-btn">INTERNATIONAL</a>
+    <a href="doku.php?id=en:hardware:pinouts" class="pcw-btn-ultra retro-text">PINOUTS</a>
+    <a href="doku.php?id=en:hardware:peripherals" class="pcw-btn-ultra retro-text">PERIPHERALS</a>
+    <a href="doku.php?id=en:hardware:motherboards" class="pcw-btn-ultra retro-text">MOTHERBOARDS</a>
+    <a href="doku.php?id=en:hardware:monitor_boards" class="pcw-btn-ultra retro-text">MONITOR BOARDS</a>
+    <a href="doku.php?id=en:hardware:keyboard_boards" class="pcw-btn-ultra retro-text">KEYBOARD BOARDS</a>
+    <a href="doku.php?id=en:hardware:printer_boards" class="pcw-btn-ultra retro-text">PRINTER BOARDS</a>
+    <a href="doku.php?id=en:hardware:daisy_wheels" class="pcw-btn-ultra retro-text">DAISY WHEELS</a>
+    <a href="doku.php?id=en:hardware:disk_drives" class="pcw-btn-ultra retro-text">DISK DRIVES</a>
   </div>
 </div>
-</html>
-----
+<!-- 2. SOFTWARE -->
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> SOFTWARE </div>
+  <div class="pcw-grid-ultra">
+    <a href="doku.php?id=en:software:applications" class="pcw-btn-ultra retro-text">APPLICATIONS</a>
+    <a href="doku.php?id=en:software:companies" class="pcw-btn-ultra retro-text">COMPANIES</a>
+    <a href="doku.php?id=en:software:games" class="pcw-btn-ultra retro-text">GAMES</a>
+    <a href="doku.php?id=en:software:new_developments" class="pcw-btn-ultra retro-text">NEW DEVELOPMENTS</a>
+    <a href="doku.php?id=en:software:publishers" class="pcw-btn-ultra retro-text">PUBLISHERS</a>
+    <a href="doku.php?id=en:software:system" class="pcw-btn-ultra retro-text">SYSTEM</a>
+  </div>
+</div>
-<html>
+<!-- 3. CATALOGUES -->
-<style>
+<div class="pcw-monitor-ultra">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+  <div class="pcw-title-ultra retro-text"> A> CATALOGUES </div>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+  <div class="pcw-grid-ultra col-1">
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=en:catalogues:start" class="pcw-btn-ultra retro-text">ACCESS FULL CATALOGUE</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+  </div>
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+</div>
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+<!-- 4. EMULATORS -->
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+<div class="pcw-monitor-ultra">
-</style>
+  <div class="pcw-title-ultra retro-text"> A> EMULATORS </div>
+  <div class="pcw-grid-ultra">
+    <a href="doku.php?id=en:emulators:introduction" class="pcw-btn-ultra retro-text">INTRODUCTION</a>
+    <a href="doku.php?id=en:emulators:spanish" class="pcw-btn-ultra retro-text">SPANISH</a>
+    <a href="doku.php?id=en:emulators:english" class="pcw-btn-ultra retro-text">ENGLISH</a>
+    <a href="doku.php?id=en:emulators:international" class="pcw-btn-ultra retro-text">INTERNATIONAL</a>
+  </div>
+</div>
-<div class="pcw-monitor">
+<!-- 5. BOOKS -->
-  <div class="pcw-title"> > BOOKS </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> BOOKS </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
+  <div class="pcw-grid-ultra col-2">
-    <a href="doku.php?id=en:books:access" class="pcw-btn">ACCESS</a>
+    <a href="doku.php?id=en:books:preserved" class="pcw-btn-ultra retro-text">PRESERVED</a>
-    <a href="doku.php?id=en:books:list" class="pcw-btn">LIST</a>
+    <a href="doku.php?id=en:books:non_preserved" class="pcw-btn-ultra retro-text">NON-PRESERVED</a>
   </div>
 </div>
-</html>
-----
-<html>
-<style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
+<!-- 6. LOCOMOTIVE SOFTWARE -->
-  <div class="pcw-title"> > LOCOMOTIVE SOFTWARE </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> LOCOMOTIVE SOFTWARE </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
+  <div class="pcw-grid-ultra col-2">
-    <a href="doku.php?id=en:locomotive:applications" class="pcw-btn">APPLICATIONS</a>
+    <a href="doku.php?id=en:locomotive:applications" class="pcw-btn-ultra retro-text">APPLICATIONS</a>
-    <a href="doku.php?id=en:locomotive:catalogues" class="pcw-btn">CATALOGUES</a>
+    <a href="doku.php?id=en:locomotive:catalogues" class="pcw-btn-ultra retro-text">CATALOGUES</a>
-    <a href="doku.php?id=en:locomotive:printer_support" class="pcw-btn">PRINTER SUPPORT</a>
+    <a href="doku.php?id=en:locomotive:printer_support" class="pcw-btn-ultra retro-text">PRINTER SUPPORT</a>
-    <a href="doku.php?id=en:locomotive:magazines" class="pcw-btn">MAGAZINES</a>
+    <a href="doku.php?id=en:revistas:Script" class="pcw-btn-ultra retro-text">MAGAZINES</a>
   </div>
 </div>
-</html>
-----
+<!-- 7. MANUALS -->
+<div class="pcw-monitor-ultra">
-<html>
+  <div class="pcw-title-ultra retro-text"> A> MANUALS </div>
-<style>
+  <div class="pcw-grid-ultra col-2">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=en:manuals:amstrad_pcw" class="pcw-btn-ultra retro-text">AMSTRAD PCW MANUALS</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=en:manuals:service" class="pcw-btn-ultra retro-text">SERVICE MANUALS</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > MANUALS </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
-    <a href="doku.php?id=en:manuals:amstrad_pcw" class="pcw-btn">AMSTRAD PCW MANUALS</a>
-    <a href="doku.php?id=en:manuals:service" class="pcw-btn">SERVICE MANUALS</a>
   </div>
 </div>
-</html>
-----
-<html>
-<style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
+<!-- 8. PROGRAMMING -->
-  <div class="pcw-title"> > PROGRAMMING </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> PROGRAMMING </div>
-  <div class="pcw-grid">
+  <div class="pcw-grid-ultra">
-    <a href="doku.php?id=en:programming:technical_information" class="pcw-btn">TECHNICAL INFORMATION</a>
+    <a href="doku.php?id=en:programming:technical_information" class="pcw-btn-ultra retro-text">TECHNICAL INFORMATION</a>
-    <a href="doku.php?id=en:programming:introduction" class="pcw-btn">INTRODUCTION</a>
+    <a href="doku.php?id=en:programming:introduction" class="pcw-btn-ultra retro-text">INTRODUCTION</a>
-    <a href="doku.php?id=en:programming:languages" class="pcw-btn">LANGUAGES</a>
+    <a href="doku.php?id=en:programming:languages" class="pcw-btn-ultra retro-text">LANGUAGES</a>
   </div>
 </div>
-</html>
-----
+<!-- 9. MAGAZINES -->
+<div class="pcw-monitor-ultra">
-<html>
+  <div class="pcw-title-ultra retro-text"> A> MAGAZINES </div>
-<style>
+  <div class="pcw-grid-ultra">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=en:magazines:disc" class="pcw-btn-ultra retro-text">DISC</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=en:magazines:fanzines" class="pcw-btn-ultra retro-text">FANZINES</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=en:magazines:magazines" class="pcw-btn-ultra retro-text">MAGAZINES</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > MAGAZINES </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=en:magazines:disc" class="pcw-btn">DISC</a>
-    <a href="doku.php?id=en:magazines:fanzines" class="pcw-btn">FANZINES</a>
-    <a href="doku.php?id=en:magazines:magazines" class="pcw-btn">MAGAZINES</a>
   </div>
 </div>
-</html>
-----
-<html>
-<style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
+<!-- 10. TUTORIALS -->
-  <div class="pcw-title"> > TUTORIALS </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> TUTORIALS </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
+  <div class="pcw-grid-ultra col-2">
-    <a href="doku.php?id=en:tutorials:communications" class="pcw-btn">COMMUNICATIONS</a>
+    <a href="doku.php?id=en:tutorials:communications" class="pcw-btn-ultra retro-text">COMMUNICATIONS</a>
-    <a href="doku.php?id=en:tutorials:courses" class="pcw-btn">COURSES</a>
+    <a href="doku.php?id=en:tutorials:courses" class="pcw-btn-ultra retro-text">COURSES</a>
-    <a href="doku.php?id=en:tutorials:assembler" class="pcw-btn">ASSEMBLER</a>
+    <a href="doku.php?id=en:tutorials:assembler" class="pcw-btn-ultra retro-text">ASSEMBLER</a>
-    <a href="doku.php?id=en:tutorials:guides" class="pcw-btn">GUIDES</a>
+    <a href="doku.php?id=en:tutorials:guides" class="pcw-btn-ultra retro-text">GUIDES</a>
   </div>
 </div>
-</html>
-----
+<!-- 11. OTHERS -->
+<div class="pcw-monitor-ultra">
-<html>
+  <div class="pcw-title-ultra retro-text"> A> OTHERS </div>
-<style>
+  <div class="pcw-grid-ultra">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=en:others:acknowledgements" class="pcw-btn-ultra retro-text">ACKNOWLEDGEMENTS</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=en:others:events" class="pcw-btn-ultra retro-text">EVENTS</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=en:others:interviews" class="pcw-btn-ultra retro-text">INTERVIEWS</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+    <a href="doku.php?id=en:others:labels" class="pcw-btn-ultra retro-text">3.5" LABELS</a>
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+    <a href="doku.php?id=en:others:inventory" class="pcw-btn-ultra retro-text">INVENTORY</a>
+    <a href="doku.php?id=en:others:contact" class="pcw-btn-ultra retro-text">CONTACT</a>
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > OTHERS </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=en:others:acknowledgements" class="pcw-btn">ACKNOWLEDGEMENTS</a>
-    <a href="doku.php?id=en:others:events" class="pcw-btn">EVENTS</a>
-    <a href="doku.php?id=en:others:interviews" class="pcw-btn">INTERVIEWS</a>
-    <a href="doku.php?id=en:others:labels" class="pcw-btn">3.5" LABELS</a>
-    <a href="doku.php?id=en:others:inventory" class="pcw-btn">INVENTORY</a>
-    <a href="doku.php?id=en:others:contact" class="pcw-btn">CONTACT</a>
   </div>
 </div>
 </html>
 ----