<!DOCTYPE html>
    <html>
    <head>
      <link rel="shortcut icon" href="/freecity/favicon.ico">
      <meta name="description" content="TUJU Notes">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>/tuju/1</title>
      
      <style>
        /* Base reset to handle gray background cleanly edge-to-edge */
        body {
          background-color: #1e222b; /* Modern charcoal slate gray */
          margin: 0;
          padding: 0 0 110px 0; /* Expanded bottom padding to account for button layout spacing */
        }
    
        /* Flexbox container layout */
        .banner-container {
          display: flex;
          align-items: center;
          width: 100%;
          margin: 0;
          padding: 10px 0; /* Padding inside the strip to let buttons breathe */
          background-color: #16191f; /* Darker accent strip behind images */
          box-sizing: border-box;
        }
    
        /* Puts the row permanently at the bottom of the viewport spanning 100% width */
        .fixed-bottom {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          z-index: 999; /* Keeps images on top of standard page text */
          box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.5); /* Deep depth shadow separation */
          padding: 12px 8px; /* Room for the button margins */
        }
    
        /* --- Turn Hyperlink Containers into Buttons --- */
        .banner-container a {
          display: block;
          width: 30%;
          margin: 0 6px; /* Creates spacing between buttons */
          background-color: #242b35; /* Button surface background */
          border-radius: 12px; /* Smooth rounded button container */
          overflow: hidden; /* Clips the image perfectly inside the button curve */
          cursor: pointer;
          box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Button base shadow */
          transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.2s ease, box-shadow 0.2s ease;
          box-sizing: border-box;
        }
    
        /* Interactive Hover Animation */
        .banner-container a:hover {
          transform: translateY(-5px); /* Clean button lift */
          filter: brightness(1.2) contrast(1.05); /* Highlight content */
          /* Beautiful glowing drop shadow to match new border */
          box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4);
        }
    
        /* Makes images completely fluid to fill their allocated width slots */
        .banner-container img {
          display: block;
          width: 100%;
          height: 70px;
          border: 0;
          object-fit: cover; /* Prevents PNG skewing distortion */
          border-radius: 12px; /* Smooth curved corners globally */
        }
    
        /* New high-contrast, beautiful border color */
        .banner-container a img {
          border: 2px solid #06b6d4; /* Vibrant glowing teal-cyan for premium contrast */
          box-sizing: border-box;
          transition: border-color 0.2s ease;
        }
    
        /* Interactive border color change on hover */
        .banner-container a:hover img {
          border-color: #22d3ee; /* Ultra-bright neon aquamarine shift on hover */
        }
    
        /* Explicitly fixes the middle link wrapper to take exactly 40% width */
        .banner-container .mid-link {
          width: 40%;
        }
    
        /* Adjusted height layout rules for the middle image element */
        .banner-container .mid-img {
          height: 74px; /* Slightly taller to dynamically square up with the bordered items */
        }
    
        /* Apply the 20% width grid to the link button container in the footer row */
        .banner-container .bottom-link {
          display: block;
          width: 20%;
        }
    
        /* --- Premium Readability Styling --- */
        .content-wrapper {
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
          color: #e2e8f0; /* Crisp, clean off-white text to reduce eye strain */
          max-width: 680px; /* Golden reading paragraph width (approx 65 characters per line) */
          margin: 60px auto;
          padding: 0 24px;
        }
    
        .article-title {
          font-size: 2.5rem;
          color: #ffffff;
          margin: 0 0 12px 0;
          font-weight: 800;
          letter-spacing: -0.8px;
          line-height: 1.2;
        }
    
        .article-meta {
          font-size: 0.95rem;
          color: #a0aec0; /* Subdued gray text for meta information */
          margin-bottom: 35px;
          border-bottom: 1px solid #2d3748; /* Sleek structural dividing border line */
          padding-bottom: 20px;
        }
    
        .article-meta .author {
          font-weight: 600;
          color: #f7fafc;
        }
    
        .article-meta .divider {
          margin: 0 10px;
          color: #4a5568;
        }
    
        /* Article paragraph line spacing adjustments */
        .content-wrapper p {
          font-size: 1.15rem;
          line-height: 1.75;
          margin: 0 0 24px 0;
          color: #cbd5e1;
        }
    
        /* --- Premium Inline Text Hyperlink --- */
        .content-link {
          color: #06b6d4; /* Matching theme teal-cyan color */
          text-decoration: none;
          font-weight: 500;
          border-bottom: 1px solid rgba(6, 182, 212, 0.3);
          padding-bottom: 2px;
          transition: color 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
        }
    
        .content-link:hover {
          color: #22d3ee; /* Bright neon accent on hover */
          border-bottom-color: #22d3ee;
          text-shadow: 0 0 8px rgba(34, 211, 238, 0.4); /* Elegant, readable soft text glow */
        }
    
        .blockquote-container {
          background: #252b36; /* Dark slate panel block */
          border-left: 4px solid #06b6d4; /* Changed sidebar block quote color to match teal theme */
          margin: 40px 0;
          padding: 24px 28px;
          border-radius: 0 8px 8px 0;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
    
        .blockquote-text {
          font-size: 1.25rem !important;
          line-height: 1.6 !important;
          color: #ffffff !important;
          margin: 0 0 12px 0 !important;
          font-style: italic;
        }
    
        .blockquote-source {
          font-size: 0.9rem;
          text-align: right;
          font-style: normal;
          font-weight: 600;
          color: #94a3b8;
          text-transform: uppercase;
          letter-spacing: 1px;
          display: block;
        }
      </style>
    </head>
    <body>
    
      <!-- Top Banner Row (5 horizontal item links) -->
      <div class="banner-container">
        <a class="bottom-link" href="/i" title="/i World Map">
          <img src="/world.png">
        </a>
        <a class="bottom-link" href="/]" title="/] Qora Renaissance">
          <img src="/i/5.png">
        </a>
        <a class="bottom-link" href="/" title="Qora Home Page">
          <img src="/2ndtest/qora.png">
        </a>
        <a class="bottom-link" href="/freecity" title="/freecity">
          <img src="/i/7.png">
        </a>
        <a class="bottom-link" href="/index/blog.html?blogname=okchai2" title="Qora Blog : okchai2">
          <img src="/okchai/timahpulai.jpg">
        </a>
      </div>
    
      <!-- Refined Main Content Block -->
      <main class="content-wrapper">
        <h1 class="article-title">The Qora Blockchain Philosophy</h1>
        
        <div class="article-meta">
          By <span class="author">O. K. Chai</span>
          <span class="divider">•</span>
          <time datetime="2026-10-22">October 22, 2026</time>
        </div>
        
        <p>
          Building cohesive structural grids across the 
          <a href="/index/blockexplorer.html" class="content-link" title="Explore the Network">Qora decentralized web</a>.
        </p>
        
        <div class="blockquote-container">
          <p class="blockquote-text">
            "Simplicity is not the lack of clutter, but the presence of clarity. Design must communicate 
            systemic harmony, structural predictability, and silent functionality at every single margin edge."
          </p>
          <cite class="blockquote-source">— Principles of Spatial Layout</cite>
        </div>
        
        <p>Using HTML and JavaScript only.</p>
        <p align = center><a href="/tuju" class="content-link" title="Tuju Index">
       <img src="/i/11.png" width="15" height="15"> index</a></p>
      </main>
    
      <!-- Pinned Footer Row (3 injection links targets) -->
      <div id="tuju" class="banner-container fixed-bottom"></div>
    
      <!-- Dynamic Content Generator Logic -->
      <script>
        let luck = "";
        const y = 1;
        let x = y - 1;
        let z = y + 1;
    
        let xx = x % 20;
        let x20 = 20 + xx;
        let xxx = (x - xx) / 20;
        let x2000 = (20 + xxx) * 100 + x20;
    
        let yy = y % 20;
        let y20 = 20 + yy;
        let yyy = (y - yy) / 20;
        let y2000 = (20 + yyy) * 100 + y20;
    
        let zz = z % 20;
        let z20 = 20 + zz;
        let zzz = (z - zz) / 20;
        let z2000 = (20 + zzz) * 100 + z20;
    
        luck += '<a href="/tuju/' + x + '" title="tuju/' + x + ' Page"><img src="/i/' + x2000 + '.png"></a>';
        luck += '<a class="mid-link" href="/i' + y2000 + '" title="NFT /i' + y2000 + ' info Page"><img class="mid-img" src="/i/' + y2000 + '.png"></a>';
        luck += '<a href="/tuju/' + z + '" title="tuju/' + z + ' Page"><img src="/i/' + z2000 + '.png"></a>';
    
        document.getElementById("tuju").innerHTML = luck;
      </script>
    
    </body>
    </html>
    
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="shortcut icon" href="/freecity/favicon.ico">
    <meta name="description" content="TUJU Notes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>/tuju/1</title>
    </head>
    <body bgcolor="#198964" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
    <p id="tuju"></p>
    
    <script>
    let luck = "";
    const y = 1;
    let x = y-1;
    let z = y+1;
    let xx = x%20;
    let x20 = 20+xx;
    let xxx = (x-xx)/20;
    let x2000 = (20+xxx)*100+x20;
    let yy = y%20;
    let y20 = 20+yy;
    let yyy = (y-yy)/20;
    let y2000 = (20+xxx)*100+y20;
    let zz = z%20;
    let z20 = 20+zz;
    let zzz = (z-zz)/20;
    let z2000 = (20+zzz)*100+z20;
    
    luck += '<a href="/tuju/'+x+'" title="tuju/'+x+' Page"><img border="0" src="/i/'+x2000+'.png" width="30%" height="110"></a><img border="0" src="/i/'+y2000+'.png" width="10%" height="110"><img border="0" src="/i/'+y2000+'.png" width="10%" height="110"><img border="0" src="/i/'+y2000+'.png" width="10%" height="110"><img border="0" src="/i/'+y2000+'.png" width="10%" height="110"><a href="/tuju/'+z+'" title="tuju/'+z+' Page"><img border="0" src="/i/'+z2000+'.png" width="30%" height="110"></a><br>';
    
    document.getElementById("tuju").innerHTML = luck;
    </script>
    
    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="TUJU Notes">
        <title>/tuju/2</title>
        <link rel="shortcut icon" href="/freecity/favicon.ico">
    
        <style>
            /* --- Base Layout --- */
            body {
                background-color: #1e222b; /* Modern charcoal slate gray */
                margin: 0;
                padding: 0 0 120px 0; /* Clear space for the fixed bottom bar */
            }
    
            /* --- Flexible Layout Banners --- */
            .banner-container {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin: 0;
                padding: 10px 0;
                background-color: #16191f; /* Darker accent strip behind images */
                box-sizing: border-box;
            }
    
            /* Bottom bar pinning rules */
            .fixed-bottom {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 999;
                box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.5);
                padding: 12px 8px;
            }
    
            /* --- Global Button Container Styles --- */
            .banner-container a {
                display: block;
                margin: 0 6px;
                background-color: #242b35;
                border-radius: 12px;
                overflow: hidden;
                cursor: pointer;
                box-shadow: 0 4px 10px rgba(0,0,0,0.3);
                transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.2s ease, box-shadow 0.2s ease;
                box-sizing: border-box;
            }
    
            .banner-container a:hover {
                transform: translateY(-5px);
                filter: brightness(1.2) contrast(1.05);
                box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4);
            }
    
            .banner-container img {
                display: block;
                width: 100%;
                height: 45px;
                border: 0;
                object-fit: cover;
                border-radius: 12px;
            }
    
            .banner-container a img {
                border: 2px solid #06b6d4;
                box-sizing: border-box;
                transition: border-color 0.2s ease;
            }
    
            .banner-container a:hover img {
                border-color: #22d3ee;
            }
    
            /* --- Sizing Grid Adjustments --- */
            /* Top Navigation Link Width (5 Items = 20% each) */
            .banner-container .bottom-link { 
                width: 20%; 
            }
    
            /* Bottom Row Side Link Width (30% + 40% + 30% = 100%) */
            .banner-container .side-link { 
                width: 30%; 
            }
            
            .banner-container .mid-link { 
                width: 40%; 
            }
    
            .banner-container .mid-img { 
                height: 45px; /* Taller element optimization */
            }
    
            /* --- Premium Readability Typography --- */
            .content-wrapper {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                color: #e2e8f0;
                max-width: 680px;
                margin: 60px auto;
                padding: 0 24px;
            }
    
            .article-title {
                font-size: 2.5rem;
                color: #ffffff;
                margin: 0 0 12px 0;
                font-weight: 800;
                letter-spacing: -0.8px;
                line-height: 1.2;
            }
    
            .article-meta {
                font-size: 0.95rem;
                color: #a0aec0;
                margin-bottom: 35px;
                border-bottom: 1px solid #2d3748;
                padding-bottom: 20px;
            }
    
            .article-meta .author {
                font-weight: 600;
                color: #f7fafc;
            }
    
            .article-meta .divider {
                margin: 0 10px;
                color: #4a5568;
            }
    
            .content-wrapper p {
                font-size: 1.15rem;
                line-height: 1.75;
                margin: 0 0 24px 0;
                color: #cbd5e1;
            }
    
            .content-link {
                color: #06b6d4;
                text-decoration: none;
                font-weight: 500;
                border-bottom: 1px solid rgba(6, 182, 212, 0.3);
                padding-bottom: 2px;
                transition: color 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
            }
    
            .content-link:hover {
                color: #22d3ee;
                border-bottom-color: #22d3ee;
                text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
            }
    
            .blockquote-container {
                background: #252b36;
                border-left: 4px solid #06b6d4;
                margin: 40px 0;
                padding: 24px 28px;
                border-radius: 0 8px 8px 0;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            }
    
            .blockquote-text {
                font-size: 1.25rem !important;
                line-height: 1.6 !important;
                color: #ffffff !important;
                margin: 0 0 12px 0 !important;
                font-style: italic;
            }
    
            .blockquote-source {
                font-size: 0.9rem;
                text-align: right;
                font-style: normal;
                font-weight: 600;
                color: #94a3b8;
                text-transform: uppercase;
                letter-spacing: 1px;
                display: block;
            }
    
            .article-image-container {
                margin: 32px 0;
                border-radius: 12px;
                overflow: hidden;
                border: 1px solid #2d3748;
                box-shadow: 0 10px 30px rgba(0,0,0,0.4);
            }
    
            .article-img {
                width: 100%;
                height: auto;
                display: block;
            }
    
            .text-center {
                text-align: center;
            }
        </style>
    </head>
    <body>
    
        <!-- Top Header Navigation -->
        <nav class="banner-container">
            <a class="bottom-link" href="/i" title="/i World Map">
                <img src="/world.png" alt="World Map">
            </a>
            <a class="bottom-link" href="/]" title="/] Qora Renaissance">
                <img src="/i/5.png" alt="Qora Renaissance">
            </a>
            <a class="bottom-link" href="/" title="Qora Home Page">
                <img src="/2ndtest/qora.png" alt="Qora Home">
            </a>
            <a class="bottom-link" href="/freecity" title="/freecity">
                <img src="/i/7.png" alt="/freecity">
            </a>
            <a class="bottom-link" href="/index/blog.html?blogname=okchai2" title="Qora Blog : okchai2">
                <img src="/okchai/timahpulai.jpg" alt="okchai2 Blog">
            </a>
        </nav>
    
        <!-- Main Editorial View Content -->
        <main class="content-wrapper">
            <h1 class="article-title">The Qora Blockchain Philosophy</h1>
            <div class="article-meta">
                By <span class="author">O. K. Chai</span>
                <span class="divider">•</span>
                <time datetime="2026-10-22">October 22, 2026</time>
            </div>
    
            <p>
                Building cohesive structural grids across the 
                <a href="/index/blockexplorer.html" class="content-link" title="Explore the Network">Qora decentralized web</a>.
            </p>
    
            <div class="blockquote-container">
                <p class="blockquote-text">
                    "Simplicity is not the lack of clutter, but the presence of clarity. Design must communicate systemic harmony, structural predictability, and silent functionality at every single margin edge."
                </p>
                <cite class="blockquote-source">— Principles of Spatial Layout</cite>
            </div>
    
            <div class="article-image-container">
                <img src="/i/1400.png" alt="Decentralized Network Schema" class="article-img">
            </div>
    
            <p>Using HTML and JavaScript only.</p>
    
            <p class="text-center">
                <a href="/tuju" class="content-link" title="Tuju Index">
                    <img src="/i/1000.png" width="15" height="15" alt="index icon"> index
                </a>
            </p>
        </main>
    
        <!-- Pinned Baseline Footer Container Node Target -->
        <footer id="tuju-footer" class="banner-container fixed-bottom"></footer>
    
        <!-- Dynamic Layout Logic Script -->
        <script>
            function calculateImageId(value) {
                const remainder = value % 20;
                const groupFactor = (value - remainder) / 20;
                return (20 + groupFactor) * 100 + (20 + remainder);
            }
    
            const y = 2;
            const x = y - 1;
            const z = y + 1;
    
            const x2000 = calculateImageId(x);
            const y2000 = calculateImageId(y);
            const z2000 = calculateImageId(z);
    
            // Generate matching explicit widths using Template Literals
            let footerHTML = "";
            
            // Left item (30%)
            footerHTML += `<a class="side-link" href="/tuju/${x}" title="tuju/${x} Page">
                <img src="/i/${x2000}.png" alt="Previous">
            </a>`;
            
            // Middle item (40%)
            footerHTML += `<a class="mid-link" href="/i${y2000}" title="NFT /i${y2000} info Page">
                <img class="mid-img" src="/i/${y2000}.png" alt="Current">
            </a>`;
            
            // Right item (30%)
            footerHTML += `<a class="side-link" href="/tuju/${z}" title="tuju/${z} Page">
                <img src="/i/${z2000}.png" alt="Next">
            </a>`;
    
            document.getElementById("tuju-footer").innerHTML = footerHTML;
        </script>
    </body>
    </html>
    
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="shortcut icon" href="/freecity/favicon.ico">
    <meta name="description" content="TUJU Notes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>/tuju/3</title>
    <style>
      /* Flexbox container prevents baseline gaps underneath images */
      .banner-container {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      /* Puts the row permanently at the bottom of the viewport spanning 100% width */
      .fixed-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999; /* Keeps images on top of standard page text */
      }
      /* Ensures links behave neatly as layout blocks */
      .banner-container a {
        display: block;
        width: 30%;
        cursor: pointer;
        transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; /* Smooth button movement animation */
      }
      
      /* Modern Button Hover Effect for all hyperlinks inside rows */
      .banner-container a:hover {
        transform: translateY(-3px); /* Subtle physical button lift action */
        filter: brightness(1.15); /* Brightens the PNG design subtly */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Adds depth shadow below the button shape */
      }
    
      /* Makes images completely fluid to fill their allocated width slots */
      .banner-container img {
        display: block;
        width: 100%;
        height: 70px;
        border: 0;
      }
      /* Explicitly fixes the 4 middle images to take exactly 10% width each */
      .banner-container .mid-img {
        width: 10%;
      }
    
      /* Apply the 20% width to the link container instead of the image */
      .banner-container .bottom-link {
        display: block;
        width: 20%;
      }
    </style>
    </head>
    <body bgcolor="#198964" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" style="padding-bottom: 70px;">
    
    <!-- Top Banner Row -->
    <div id="tuju" class="banner-container"></div>
    
    <script>
    let luck = "";
    const y = 3;
    let x = y-1;
    let z = y+1;
    
    let xx = x%20;
    let x20 = 20+xx;
    let xxx = (x-xx)/20;
    let x2000 = (20+xxx)*100+x20;
    
    let yy = y%20;
    let y20 = 20+yy;
    let yyy = (y-yy)/20;
    let y2000 = (20+yyy)*100+y20; 
    
    let zz = z%20;
    let z20 = 20+zz;
    let zzz = (z-zz)/20;
    let z2000 = (20+zzz)*100+z20;
    
    luck += '<a href="/tuju/'+x+'" title="tuju/'+x+' Page"><img src="/i/'+x2000+'.png"></a>';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<a href="/tuju/'+z+'" title="tuju/'+z+' Page"><img src="/i/'+z2000+'.png"></a>';
    
    document.getElementById("tuju").innerHTML = luck;
    </script>
    
    <p>Hello World</p>
    
    <!-- Pinned Footer Row -->
    <div class="banner-container fixed-bottom">
      <a class="bottom-link" href="/" title="Qora Home Page"><img src="/2ndtest/qorabanner.jpg"></a>
      <a class="bottom-link" href="/]" title="/] Qora Renaissance"><img src="/i/5.png"></a>
      <a class="bottom-link" href="/i" title="/i World Map"><img src="/world.png"></a>
      <a class="bottom-link" href="/freecity" title="/freecity"><img src="/i/7.png"></a>
      <a class="bottom-link" href="/index/blog.html?blogname=okchai2" title="Qora Blog : okchai2"><img src="/okchai/timahpulai.jpg"></a>
    </div>
    
    </body>
    </html>
    
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="shortcut icon" href="/freecity/favicon.ico">
    <meta name="description" content="TUJU Notes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>/tuju/4</title>
    <style>
      /* Flexbox container prevents baseline gaps underneath images */
      .banner-container {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      /* Puts the row permanently at the bottom of the viewport spanning 100% width */
      .fixed-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999; /* Keeps images on top of standard page text */
      }
      /* Ensures links behave neatly as layout blocks */
      .banner-container a {
        display: block;
        width: 30%;
        cursor: pointer;
        transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; /* Smooth button movement animation */
      }
      
      /* Modern Button Hover Effect for all hyperlinks inside rows */
      .banner-container a:hover {
        transform: translateY(-3px); /* Subtle physical button lift action */
        filter: brightness(1.15); /* Brightens the PNG design subtly */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Adds depth shadow below the button shape */
      }
    
      /* Makes images completely fluid to fill their allocated width slots */
      .banner-container img {
        display: block;
        width: 100%;
        height: 70px;
        border: 0;
      }
      /* Explicitly fixes the 4 middle images to take exactly 10% width each */
      .banner-container .mid-img {
        width: 10%;
      }
    
      /* Apply the 20% width to the link container instead of the image */
      .banner-container .bottom-link {
        display: block;
        width: 20%;
      }
    
      /* --- Content Styling --- */
      .content-wrapper {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: #ffffff;
        max-width: 800px;
        margin: 40px auto;
        padding: 0 20px;
        line-height: 1.6;
      }
      .article-title {
        font-size: 2.2rem;
        margin-bottom: 5px;
        font-weight: 700;
        letter-spacing: -0.5px;
      }
      .article-meta {
        font-size: 0.95rem;
        color: #cce7dd;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding-bottom: 15px;
      }
      .article-meta .author {
        font-weight: bold;
        color: #ffffff;
      }
      .article-meta .divider {
        margin: 0 8px;
        opacity: 0.5;
      }
      .blockquote-container {
        background: rgba(255, 255, 255, 0.1);
        border-left: 4px solid #ffffff;
        margin: 30px 0;
        padding: 20px 25px;
        font-style: italic;
        border-radius: 0 8px 8px 0;
      }
      .blockquote-text {
        font-size: 1.2rem;
        margin: 0 0 10px 0;
        line-height: 1.5;
      }
      .blockquote-source {
        font-size: 0.95rem;
        text-align: right;
        font-style: normal;
        font-weight: 600;
        color: #cce7dd;
        display: block;
      }
    </style>
    </head>
    <body bgcolor="#198964" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" style="padding-bottom: 70px;">
    
    <!-- Top Banner Row -->
    <div id="tuju" class="banner-container"></div>
    
    <script>
    let luck = "";
    const y = 4;
    let x = y-1;
    let z = y+1;
    
    let xx = x%20;
    let x20 = 20+xx;
    let xxx = (x-xx)/20;
    let x2000 = (20+xxx)*100+x20;
    
    let yy = y%20;
    let y20 = 20+yy;
    let yyy = (y-yy)/20;
    let y2000 = (20+yyy)*100+y20; 
    
    let zz = z%20;
    let z20 = 20+zz;
    let zzz = (z-zz)/20;
    let z2000 = (20+zzz)*100+z20;
    
    luck += '<a href="/tuju/'+x+'" title="tuju/'+x+' Page"><img src="/i/'+x2000+'.png"></a>';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<a href="/tuju/'+z+'" title="tuju/'+z+' Page"><img src="/i/'+z2000+'.png"></a>';
    
    document.getElementById("tuju").innerHTML = luck;
    </script>
    
    <!-- Main Content Block -->
    <main class="content-wrapper">
      <h1 class="article-title">The Qora blockchain Philosophy</h1>
      
      <div class="article-meta">
        By <span class="author">O. K. Chai</span>
        <span class="divider">•</span>
        <time datetime="2026-10-22">October 22, 2026</time>
      </div>
    
      <p>
        Building cohesive structural grids across the Qora decentralized web.
      </p>
    
      <div class="blockquote-container">
        <p class="blockquote-text">
          "Simplicity is not the lack of clutter, but the presence of clarity. Design must communicate systemic harmony, structural predictability, and silent functionality at every single margin edge."
        </p>
        <cite class="blockquote-source">— Principles of Spatial Layout</cite>
      </div>
    
      <p>
        Using HTML and JavaScript only.
      </p>
    </main>
    
    <!-- Pinned Footer Row -->
    <div class="banner-container fixed-bottom">
      <a class="bottom-link" href="/" title="Qora Home Page"><img src="/2ndtest/qorabanner.jpg"></a>
      <a class="bottom-link" href="/]" title="/] Qora Renaissance"><img src="/i/5.png"></a>
      <a class="bottom-link" href="/i" title="/i World Map"><img src="/world.png"></a>
      <a class="bottom-link" href="/freecity" title="/freecity"><img src="/i/7.png"></a>
      <a class="bottom-link" href="/index/blog.html?blogname=okchai2" title="Qora Blog : okchai2"><img src="/okchai/timahpulai.jpg"></a>
    </div>
    
    </body>
    </html>
    
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="shortcut icon" href="/freecity/favicon.ico">
    <meta name="description" content="TUJU Notes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>/tuju/5</title>
    <style>
      /* Flexbox container prevents baseline gaps underneath images */
      .banner-container {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      /* Puts the row permanently at the bottom of the viewport spanning 100% width */
      .fixed-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999; /* Keeps images on top of standard page text */
      }
      /* Ensures links behave neatly as layout blocks */
      .banner-container a {
        display: block;
        width: 30%;
        cursor: pointer;
        transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; /* Smooth button movement animation */
      }
      
      /* Modern Button Hover Effect for all hyperlinks inside rows */
      .banner-container a:hover {
        transform: translateY(-3px); /* Subtle physical button lift action */
        filter: brightness(1.15); /* Brightens the PNG design subtly */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Adds depth shadow below the button shape */
      }
    
      /* Makes images completely fluid to fill their allocated width slots */
      .banner-container img {
        display: block;
        width: 100%;
        height: 70px;
        border: 0;
      }
      /* Explicitly fixes the 4 middle images to take exactly 10% width each */
      .banner-container .mid-img {
        width: 10%;
      }
    
      /* Apply the 20% width to the link container instead of the image */
      .banner-container .bottom-link {
        display: block;
        width: 20%;
      }
    
      /* --- Content Styling --- */
      .content-wrapper {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: #ffffff;
        max-width: 800px;
        margin: 40px auto;
        padding: 0 20px;
        line-height: 1.6;
      }
      .article-title {
        font-size: 2.2rem;
        margin-bottom: 5px;
        font-weight: 700;
        letter-spacing: -0.5px;
      }
      .article-meta {
        font-size: 0.95rem;
        color: #cce7dd;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding-bottom: 15px;
      }
      .article-meta .author {
        font-weight: bold;
        color: #ffffff;
      }
      .article-meta .divider {
        margin: 0 8px;
        opacity: 0.5;
      }
      .blockquote-container {
        background: rgba(255, 255, 255, 0.1);
        border-left: 4px solid #ffffff;
        margin: 30px 0;
        padding: 20px 25px;
        font-style: italic;
        border-radius: 0 8px 8px 0;
      }
      .blockquote-text {
        font-size: 1.2rem;
        margin: 0 0 10px 0;
        line-height: 1.5;
      }
      .blockquote-source {
        font-size: 0.95rem;
        text-align: right;
        font-style: normal;
        font-weight: 600;
        color: #cce7dd;
        display: block;
      }
    </style>
    </head>
    <body bgcolor="#198964" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" style="padding-bottom: 70px;">
    
    <!-- Top Banner Row -->
    <div id="tuju" class="banner-container"></div>
    
    <script>
    let luck = "";
    const y = 5;
    let x = y-1;
    let z = y+1;
    
    let xx = x%20;
    let x20 = 20+xx;
    let xxx = (x-xx)/20;
    let x2000 = (20+xxx)*100+x20;
    
    let yy = y%20;
    let y20 = 20+yy;
    let yyy = (y-yy)/20;
    let y2000 = (20+yyy)*100+y20; 
    
    let zz = z%20;
    let z20 = 20+zz;
    let zzz = (z-zz)/20;
    let z2000 = (20+zzz)*100+z20;
    
    luck += '<a href="/tuju/'+x+'" title="tuju/'+x+' Page"><img src="/i/'+x2000+'.png"></a>';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<a href="/tuju/'+z+'" title="tuju/'+z+' Page"><img src="/i/'+z2000+'.png"></a>';
    
    document.getElementById("tuju").innerHTML = luck;
    </script>
    
    <!-- Main Content Block -->
    <main class="content-wrapper">
      <h1 class="article-title">The Qora blockchain Philosophy</h1>
      
      <div class="article-meta">
        By <span class="author">O. K. Chai</span>
        <span class="divider">•</span>
        <time datetime="2026-10-22">October 22, 2026</time>
      </div>
    
      <p>
        Building cohesive structural grids across the Qora decentralized web.
      </p>
    
      <div class="blockquote-container">
        <p class="blockquote-text">
          "Simplicity is not the lack of clutter, but the presence of clarity. Design must communicate systemic harmony, structural predictability, and silent functionality at every single margin edge."
        </p>
        <cite class="blockquote-source">— Principles of Spatial Layout</cite>
      </div>
    
      <p>
        Using HTML and JavaScript only.
      </p>
    </main>
    
    <!-- Pinned Footer Row -->
    <div class="banner-container fixed-bottom">
      <a class="bottom-link" href="/" title="Qora Home Page"><img src="/2ndtest/qora.png"></a>
      <a class="bottom-link" href="/]" title="/] Qora Renaissance"><img src="/i/5.png"></a>
      <a class="bottom-link" href="/i" title="/i World Map"><img src="/world.png"></a>
      <a class="bottom-link" href="/freecity" title="/freecity"><img src="/i/7.png"></a>
      <a class="bottom-link" href="/index/blog.html?blogname=okchai2" title="Qora Blog : okchai2"><img src="/okchai/timahpulai.jpg"></a>
    </div>
    
    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="shortcut icon" href="/freecity/favicon.ico">
    <meta name="description" content="TUJU Notes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>/tuju/6</title>
    <style>
      /* Base reset to handle gray background cleanly edge-to-edge */
      body {
        background-color: #1e222b; /* Modern charcoal slate gray */
        margin: 0;
        padding: 0 0 90px 0; /* Dynamic padding buffer for fixed bottom images */
      }
    
      /* Flexbox container prevents baseline gaps underneath images */
      .banner-container {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #16191f; /* Darker accent strip behind images */
      }
      /* Puts the row permanently at the bottom of the viewport spanning 100% width */
      .fixed-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999; /* Keeps images on top of standard page text */
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4); /* Elegant depth shadow separation */
      }
      /* Ensures links behave neatly as layout blocks */
      .banner-container a {
        display: block;
        width: 30%;
        cursor: pointer;
        transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.2s ease, box-shadow 0.2s ease;
      }
      
      /* Modern Button Hover Effect for all hyperlinks inside rows */
      .banner-container a:hover {
        transform: translateY(-4px); /* Clean lift animation */
        filter: brightness(1.2) contrast(1.05); /* Enhances artwork visibility */
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); /* Ambient shadow */
      }
    
      /* Makes images completely fluid to fill their allocated width slots */
      .banner-container img {
        display: block;
        width: 100%;
        height: 70px;
        border: 0;
        object-fit: cover; /* Prevents PNG skewing distortion */
      }
      /* Explicitly fixes the 1 middle images to take exactly 40% width each */
      .banner-container .mid-img {
        width: 40%;
      }
    
      /* Apply the 20% width to the link container instead of the image */
      .banner-container .bottom-link {
        display: block;
        width: 20%;
      }
    
      /* --- Premium Readability Styling --- */
      .content-wrapper {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: #e2e8f0; /* Crisp, clean off-white text to reduce eye strain */
        max-width: 680px; /* Golden reading paragraph width (approx 65 characters per line) */
        margin: 60px auto;
        padding: 0 24px;
      }
      .article-title {
        font-size: 2.5rem;
        color: #ffffff;
        margin: 0 0 12px 0;
        font-weight: 800;
        letter-spacing: -0.8px;
        line-height: 1.2;
      }
      .article-meta {
        font-size: 0.95rem;
        color: #a0aec0; /* Subdued gray text for meta information */
        margin-bottom: 35px;
        border-bottom: 1px solid #2d3748; /* Sleek structural dividing border line */
        padding-bottom: 20px;
      }
      .article-meta .author {
        font-weight: 600;
        color: #f7fafc;
      }
      .article-meta .divider {
        margin: 0 10px;
        color: #4a5568;
      }
      
      /* Article paragraph line spacing adjustments */
      .content-wrapper p {
        font-size: 1.15rem;
        line-height: 1.75;
        margin: 0 0 24px 0;
        color: #cbd5e1;
      }
    
      .blockquote-container {
        background: #252b36; /* Dark slate panel block */
        border-left: 4px solid #3b82f6; /* Electric Qora-blue layout focus bar */
        margin: 40px 0;
        padding: 24px 28px;
        border-radius: 0 8px 8px 0;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }
      .blockquote-text {
        font-size: 1.25rem !important;
        line-height: 1.6 !important;
        color: #ffffff !important;
        margin: 0 0 12px 0 !important;
        font-style: italic;
      }
      .blockquote-source {
        font-size: 0.9rem;
        text-align: right;
        font-style: normal;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: block;
      }
    </style>
    </head>
    <body>
    
    <!-- Top Banner Row -->
    <div id="tuju" class="banner-container"></div>
    
    <script>
    let luck = "";
    const y = 6;
    let x = y-1;
    let z = y+1;
    
    let xx = x%20;
    let x20 = 20+xx;
    let xxx = (x-xx)/20;
    let x2000 = (20+xxx)*100+x20;
    
    let yy = y%20;
    let y20 = 20+yy;
    let yyy = (y-yy)/20;
    let y2000 = (20+yyy)*100+y20; 
    
    let zz = z%20;
    let z20 = 20+zz;
    let zzz = (z-zz)/20;
    let z2000 = (20+zzz)*100+z20;
    
    luck += '<a href="/tuju/'+x+'" title="tuju/'+x+' Page"><img src="/i/'+x2000+'.png"></a>';
    luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
    luck += '<a href="/tuju/'+z+'" title="tuju/'+z+' Page"><img src="/i/'+z2000+'.png"></a>';
    
    document.getElementById("tuju").innerHTML = luck;
    </script>
    
    <!-- Refined Main Content Block -->
    <main class="content-wrapper">
      <h1 class="article-title">The Qora Blockchain Philosophy</h1>
      
      <div class="article-meta">
        By <span class="author">O. K. Chai</span>
        <span class="divider">•</span>
        <time datetime="2026-10-22">October 22, 2026</time>
      </div>
    
      <p>
        Building cohesive structural grids across the Qora decentralized web.
      </p>
    
      <div class="blockquote-container">
        <p class="blockquote-text">
          "Simplicity is not the lack of clutter, but the presence of clarity. Design must communicate systemic harmony, structural predictability, and silent functionality at every single margin edge."
        </p>
        <cite class="blockquote-source">— Principles of Spatial Layout</cite>
      </div>
    
      <p>
        Using HTML and JavaScript only.
      </p>
    </main>
    
    <!-- Pinned Footer Row -->
    <div class="banner-container fixed-bottom">
      <a class="bottom-link" href="/i" title="/i World Map"><img src="/world.png"></a>
      <a class="bottom-link" href="/]" title="/] Qora Renaissance"><img src="/i/5.png"></a>
      <a class="bottom-link" href="/" title="Qora Home Page"><img src="/2ndtest/qora.png"></a>
      <a class="bottom-link" href="/freecity" title="/freecity"><img src="/i/7.png"></a>
      <a class="bottom-link" href="/index/blog.html?blogname=okchai2" title="Qora Blog : okchai2"><img src="/okchai/timahpulai.jpg"></a>
    </div>
    
    </body>
    </html>
    
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="shortcut icon" href="/freecity/favicon.ico">
        <meta name="description" content="TUJU Notes">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>/tuju/7</title>
        <style>
            /* Base reset to handle gray background cleanly edge-to-edge */
            body {
                background-color: #1e222b; /* Modern charcoal slate gray */
                margin: 0;
                padding: 0 0 110px 0; /* Expanded bottom padding to account for button layout spacing */
            }
            /* Flexbox container layout */
            .banner-container {
                display: flex;
                align-items: center;
                width: 100%;
                margin: 0;
                padding: 10px 0; /* Padding inside the strip to let buttons breathe */
                background-color: #16191f; /* Darker accent strip behind images */
                box-sizing: border-box;
            }
            /* Puts the row permanently at the bottom of the viewport spanning 100% width */
            .fixed-bottom {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 999; /* Keeps images on top of standard page text */
                box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.5); /* Deep depth shadow separation */
                padding: 12px 8px; /* Room for the button margins */
            }
            
            /* --- Turn Hyperlink Containers into Buttons --- */
            .banner-container a {
                display: block;
                width: 30%;
                margin: 0 6px; /* Creates spacing between buttons */
                background-color: #242b35; /* Button surface background */
                border-radius: 12px; /* Smooth rounded button container */
                overflow: hidden; /* Clips the image perfectly inside the button curve */
                cursor: pointer;
                box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Button base shadow */
                transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.2s ease, box-shadow 0.2s ease;
                box-sizing: border-box;
            }
            /* Interactive Hover Animation */
            .banner-container a:hover {
                transform: translateY(-5px); /* Clean button lift */
                filter: brightness(1.2) contrast(1.05); /* Highlight content */
                
                /* --- UPDATED: Beautiful glowing drop shadow to match new border --- */
                box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4); 
            }
            
            /* Makes images completely fluid to fill their allocated width slots */
            .banner-container img {
                display: block;
                width: 100%;
                height: 70px;
                border: 0;
                object-fit: cover; /* Prevents PNG skewing distortion */
                border-radius: 12px; /* Smooth curved corners globally */
            }
            
            /* --- UPDATED: New high-contrast, beautiful border color --- */
            .banner-container a img {
                border: 2px solid #06b6d4; /* Vibrant glowing teal-cyan for premium contrast */
                box-sizing: border-box;
                transition: border-color 0.2s ease;
            }
            /* Interactive border color change on hover */
            .banner-container a:hover img {
                border-color: #22d3ee; /* Ultra-bright neon aquamarine shift on hover */
            }
    
            /* Explicitly fixes the 1 middle image to take exactly 40% width and match heights */
            .banner-container .mid-img {
                width: 40%;
                height: 74px; /* Slightly taller to dynamically square up with the bordered items */
                margin: 0 6px;
            }
            /* Apply the 20% width grid to the link button container in the footer row */
            .banner-container .bottom-link {
                display: block;
                width: 20%;
            }
            
            /* --- Premium Readability Styling --- */
            .content-wrapper {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                color: #e2e8f0; /* Crisp, clean off-white text to reduce eye strain */
                max-width: 680px; /* Golden reading paragraph width (approx 65 characters per line) */
                margin: 60px auto;
                padding: 0 24px;
            }
            .article-title {
                font-size: 2.5rem;
                color: #ffffff;
                margin: 0 0 12px 0;
                font-weight: 800;
                letter-spacing: -0.8px;
                line-height: 1.2;
            }
            .article-meta {
                font-size: 0.95rem;
                color: #a0aec0; /* Subdued gray text for meta information */
                margin-bottom: 35px;
                border-bottom: 1px solid #2d3748; /* Sleek structural dividing border line */
                padding-bottom: 20px;
            }
            .article-meta .author {
                font-weight: 600;
                color: #f7fafc;
            }
            .article-meta .divider {
                margin: 0 10px;
                color: #4a5568;
            }
            /* Article paragraph line spacing adjustments */
            .content-wrapper p {
                font-size: 1.15rem;
                line-height: 1.75;
                margin: 0 0 24px 0;
                color: #cbd5e1;
            }
            .blockquote-container {
                background: #252b36; /* Dark slate panel block */
                border-left: 4px solid #06b6d4; /* UPDATED: Changed sidebar block quote color to match teal theme */
                margin: 40px 0;
                padding: 24px 28px;
                border-radius: 0 8px 8px 0;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            }
            .blockquote-text {
                font-size: 1.25rem !important;
                line-height: 1.6 !important;
                color: #ffffff !important;
                margin: 0 0 12px 0 !important;
                font-style: italic;
            }
            .blockquote-source {
                font-size: 0.9rem;
                text-align: right;
                font-style: normal;
                font-weight: 600;
                color: #94a3b8;
                text-transform: uppercase;
                letter-spacing: 1px;
                display: block;
            }
        </style>
    </head>
    <body>
        <!-- Top Banner Row -->
        <div id="tuju" class="banner-container"></div>
        <script>
            let luck = "";
            const y = 7;
            let x = y-1;
            let z = y+1;
            let xx = x%20;
            let x20 = 20+xx;
            let xxx = (x-xx)/20;
            let x2000 = (20+xxx)*100+x20;
            let yy = y%20;
            let y20 = 20+yy;
            let yyy = (y-yy)/20;
            let y2000 = (20+yyy)*100+y20;
            let zz = z%20;
            let z20 = 20+zz;
            let zzz = (z-zz)/20;
            let z2000 = (20+zzz)*100+z20;
            luck += '<a href="/tuju/'+x+'" title="tuju/'+x+' Page"><img src="/i/'+x2000+'.png"></a>';
            luck += '<img class="mid-img" src="/i/'+y2000+'.png">';
            luck += '<a href="/tuju/'+z+'" title="tuju/'+z+' Page"><img src="/i/'+z2000+'.png"></a>';
            document.getElementById("tuju").innerHTML = luck;
        </script>
    
        <!-- Refined Main Content Block -->
        <main class="content-wrapper">
            <h1 class="article-title">The Qora Blockchain Philosophy</h1>
            <div class="article-meta">
                By <span class="author">O. K. Chai</span>
                <span class="divider">•</span>
                <time datetime="2026-10-22">October 22, 2026</time>
            </div>
            <p>
                Building cohesive structural grids across the Qora decentralized web.
            </p>
            <div class="blockquote-container">
                <p class="blockquote-text">
                    "Simplicity is not the lack of clutter, but the presence of clarity. Design must communicate systemic harmony, structural predictability, and silent functionality at every single margin edge."
                </p>
                <cite class="blockquote-source">— Principles of Spatial Layout</cite>
            </div>
            <p>
                Using HTML and JavaScript only.
            </p>
        </main>
    
        <!-- Pinned Footer Row -->
        <div class="banner-container fixed-bottom">
            <a class="bottom-link" href="/i" title="/i World Map"><img src="/world.png"></a>
            <a class="bottom-link" href="/]" title="/] Qora Renaissance"><img src="/i/5.png"></a>
            <a class="bottom-link" href="/" title="Qora Home Page"><img src="/2ndtest/qora.png"></a>
            <a class="bottom-link" href="/freecity" title="/freecity"><img src="/i/7.png"></a>
            <a class="bottom-link" href="/index/blog.html?blogname=okchai2" title="Qora Blog : okchai2"><img src="/okchai/timahpulai.jpg"></a>
        </div>
    </body>
    </html>
    
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="shortcut icon" href="/freecity/favicon.ico">
        <meta name="description" content="TUJU Notes">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>/tuju/8</title>
        <style>
            /* Base reset to handle gray background cleanly edge-to-edge */
            body {
                background-color: #1e222b; /* Modern charcoal slate gray */
                margin: 0;
                padding: 0 0 110px 0; /* Expanded bottom padding to account for button layout spacing */
            }
    
            /* Flexbox container layout */
            .banner-container {
                display: flex;
                align-items: center;
                width: 100%;
                margin: 0;
                padding: 10px 0; /* Padding inside the strip to let buttons breathe */
                background-color: #16191f; /* Darker accent strip behind images */
                box-sizing: border-box;
            }
    
            /* Puts the row permanently at the bottom of the viewport spanning 100% width */
            .fixed-bottom {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 999; /* Keeps images on top of standard page text */
                box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.5); /* Deep depth shadow separation */
                padding: 12px 8px; /* Room for the button margins */
            }
    
            /* --- Turn Hyperlink Containers into Buttons --- */
            .banner-container a {
                display: block;
                width: 30%;
                margin: 0 6px; /* Creates spacing between buttons */
                background-color: #242b35; /* Button surface background */
                border-radius: 12px; /* Smooth rounded button container */
                overflow: hidden; /* Clips the image perfectly inside the button curve */
                cursor: pointer;
                box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Button base shadow */
                transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.2s ease, box-shadow 0.2s ease;
                box-sizing: border-box;
            }
    
            /* Interactive Hover Animation */
            .banner-container a:hover {
                transform: translateY(-5px); /* Clean button lift */
                filter: brightness(1.2) contrast(1.05); /* Highlight content */
                /* Beautiful glowing drop shadow to match new border */
                box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4);
            }
    
            /* Makes images completely fluid to fill their allocated width slots */
            .banner-container img {
                display: block;
                width: 100%;
                height: 70px;
                border: 0;
                object-fit: cover; /* Prevents PNG skewing distortion */
                border-radius: 12px; /* Smooth curved corners globally */
            }
    
            /* New high-contrast, beautiful border color */
            .banner-container a img {
                border: 2px solid #06b6d4; /* Vibrant glowing teal-cyan for premium contrast */
                box-sizing: border-box;
                transition: border-color 0.2s ease;
            }
    
            /* Interactive border color change on hover */
            .banner-container a:hover img {
                border-color: #22d3ee; /* Ultra-bright neon aquamarine shift on hover */
            }
    
            /* Explicitly fixes the middle link wrapper to take exactly 40% width */
            .banner-container .mid-link {
                width: 40%;
            }
    
            /* Adjusted height layout rules for the middle image element */
            .banner-container .mid-img {
                height: 74px; /* Slightly taller to dynamically square up with the bordered items */
            }
    
            /* Apply the 20% width grid to the link button container in the footer row */
            .banner-container .bottom-link {
                display: block;
                width: 20%;
            }
    
            /* --- Premium Readability Styling --- */
            .content-wrapper {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                color: #e2e8f0; /* Crisp, clean off-white text to reduce eye strain */
                max-width: 680px; /* Golden reading paragraph width (approx 65 characters per line) */
                margin: 60px auto;
                padding: 0 24px;
            }
    
            .article-title {
                font-size: 2.5rem;
                color: #ffffff;
                margin: 0 0 12px 0;
                font-weight: 800;
                letter-spacing: -0.8px;
                line-height: 1.2;
            }
    
            .article-meta {
                font-size: 0.95rem;
                color: #a0aec0; /* Subdued gray text for meta information */
                margin-bottom: 35px;
                border-bottom: 1px solid #2d3748; /* Sleek structural dividing border line */
                padding-bottom: 20px;
            }
    
            .article-meta .author {
                font-weight: 600;
                color: #f7fafc;
            }
    
            .article-meta .divider {
                margin: 0 10px;
                color: #4a5568;
            }
    
            /* Article paragraph line spacing adjustments */
            .content-wrapper p {
                font-size: 1.15rem;
                line-height: 1.75;
                margin: 0 0 24px 0;
                color: #cbd5e1;
            }
    
            .blockquote-container {
                background: #252b36; /* Dark slate panel block */
                border-left: 4px solid #06b6d4; /* Changed sidebar block quote color to match teal theme */
                margin: 40px 0;
                padding: 24px 28px;
                border-radius: 0 8px 8px 0;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            }
    
            .blockquote-text {
                font-size: 1.25rem !important;
                line-height: 1.6 !important;
                color: #ffffff !important;
                margin: 0 0 12px 0 !important;
                font-style: italic;
            }
    
            .blockquote-source {
                font-size: 0.9rem;
                text-align: right;
                font-style: normal;
                font-weight: 600;
                color: #94a3b8;
                text-transform: uppercase;
                letter-spacing: 1px;
                display: block;
            }
        </style>
    </head>
    <body>
    
        <!-- Top Banner Row -->
        <div id="tuju" class="banner-container"></div>
    
        <script>
            let luck = "";
            const y = 8;
            let x = y-1;
            let z = y+1;
    
            let xx = x%20;
            let x20 = 20+xx;
            let xxx = (x-xx)/20;
            let x2000 = (20+xxx)*100+x20;
    
            let yy = y%20;
            let y20 = 20+yy;
            let yyy = (y-yy)/20;
            let y2000 = (20+yyy)*100+y20;
    
            let zz = z%20;
            let z20 = 20+zz;
            let zzz = (z-zz)/20;
            let z2000 = (20+zzz)*100+z20;
    
            luck += '<a href="/tuju/'+x+'" title="tuju/'+x+' Page"><img src="/i/'+x2000+'.png"></a>';
            luck += '<a class="mid-link" href="/i'+y+'" title="NFT /i'+y2000+' info Page"><img class="mid-img" src="/i/'+y2000+'.png"></a>';
            luck += '<a href="/tuju/'+z+'" title="tuju/'+z+' Page"><img src="/i/'+z2000+'.png"></a>';
    
            document.getElementById("tuju").innerHTML = luck;
        </script>
    
        <!-- Refined Main Content Block -->
        <main class="content-wrapper">
            <h1 class="article-title">The Qora Blockchain Philosophy</h1>
            <div class="article-meta">
                By <span class="author">O. K. Chai</span>
                <span class="divider">•</span>
                <time datetime="2026-10-22">October 22, 2026</time>
            </div>
            
            <p>
                Building cohesive structural grids across the Qora decentralized web.
            </p>
    
            <div class="blockquote-container">
                <p class="blockquote-text">
                    "Simplicity is not the lack of clutter, but the presence of clarity. Design must communicate systemic harmony, structural predictability, and silent functionality at every single margin edge."
                </p>
                <cite class="blockquote-source">— Principles of Spatial Layout</cite>
            </div>
    
            <p>
                Using HTML and JavaScript only.
            </p>
        </main>
    
        <!-- Pinned Footer Row -->
        <div class="banner-container fixed-bottom">
            <a class="bottom-link" href="/i" title="/i World Map"><img src="/world.png"></a>
            <a class="bottom-link" href="/]" title="/] Qora Renaissance"><img src="/i/5.png"></a>
            <a class="bottom-link" href="/" title="Qora Home Page"><img src="/2ndtest/qora.png"></a>
            <a class="bottom-link" href="/freecity" title="/freecity"><img src="/i/7.png"></a>
            <a class="bottom-link" href="/index/blog.html?blogname=okchai2" title="Qora Blog : okchai2"><img src="/okchai/timahpulai.jpg"></a>
        </div>
    
    </body>
    </html>
    
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="shortcut icon" href="/freecity/favicon.ico">
        <meta name="description" content="TUJU Notes">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>/tuju/9</title>
        <style>
            /* Base reset to handle gray background cleanly edge-to-edge */
            body {
                background-color: #1e222b; /* Modern charcoal slate gray */
                margin: 0;
                padding: 0 0 110px 0; /* Expanded bottom padding to account for button layout spacing */
            }
    
            /* Flexbox container layout */
            .banner-container {
                display: flex;
                align-items: center;
                width: 100%;
                margin: 0;
                padding: 10px 0; /* Padding inside the strip to let buttons breathe */
                background-color: #16191f; /* Darker accent strip behind images */
                box-sizing: border-box;
            }
    
            /* Puts the row permanently at the bottom of the viewport spanning 100% width */
            .fixed-bottom {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 999; /* Keeps images on top of standard page text */
                box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.5); /* Deep depth shadow separation */
                padding: 12px 8px; /* Room for the button margins */
            }
    
            /* --- Turn Hyperlink Containers into Buttons --- */
            .banner-container a {
                display: block;
                width: 30%;
                margin: 0 6px; /* Creates spacing between buttons */
                background-color: #242b35; /* Button surface background */
                border-radius: 12px; /* Smooth rounded button container */
                overflow: hidden; /* Clips the image perfectly inside the button curve */
                cursor: pointer;
                box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Button base shadow */
                transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.2s ease, box-shadow 0.2s ease;
                box-sizing: border-box;
            }
    
            /* Interactive Hover Animation */
            .banner-container a:hover {
                transform: translateY(-5px); /* Clean button lift */
                filter: brightness(1.2) contrast(1.05); /* Highlight content */
                /* Beautiful glowing drop shadow to match new border */
                box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4);
            }
    
            /* Makes images completely fluid to fill their allocated width slots */
            .banner-container img {
                display: block;
                width: 100%;
                height: 70px;
                border: 0;
                object-fit: cover; /* Prevents PNG skewing distortion */
                border-radius: 12px; /* Smooth curved corners globally */
            }
    
            /* New high-contrast, beautiful border color */
            .banner-container a img {
                border: 2px solid #06b6d4; /* Vibrant glowing teal-cyan for premium contrast */
                box-sizing: border-box;
                transition: border-color 0.2s ease;
            }
    
            /* Interactive border color change on hover */
            .banner-container a:hover img {
                border-color: #22d3ee; /* Ultra-bright neon aquamarine shift on hover */
            }
    
            /* Explicitly fixes the middle link wrapper to take exactly 40% width */
            .banner-container .mid-link {
                width: 40%;
            }
    
            /* Adjusted height layout rules for the middle image element */
            .banner-container .mid-img {
                height: 74px; /* Slightly taller to dynamically square up with the bordered items */
            }
    
            /* Apply the 20% width grid to the link button container in the footer row */
            .banner-container .bottom-link {
                display: block;
                width: 20%;
            }
    
            /* --- Premium Readability Styling --- */
            .content-wrapper {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                color: #e2e8f0; /* Crisp, clean off-white text to reduce eye strain */
                max-width: 680px; /* Golden reading paragraph width (approx 65 characters per line) */
                margin: 60px auto;
                padding: 0 24px;
            }
    
            .article-title {
                font-size: 2.5rem;
                color: #ffffff;
                margin: 0 0 12px 0;
                font-weight: 800;
                letter-spacing: -0.8px;
                line-height: 1.2;
            }
    
            .article-meta {
                font-size: 0.95rem;
                color: #a0aec0; /* Subdued gray text for meta information */
                margin-bottom: 35px;
                border-bottom: 1px solid #2d3748; /* Sleek structural dividing border line */
                padding-bottom: 20px;
            }
    
            .article-meta .author {
                font-weight: 600;
                color: #f7fafc;
            }
    
            .article-meta .divider {
                margin: 0 10px;
                color: #4a5568;
            }
    
            /* Article paragraph line spacing adjustments */
            .content-wrapper p {
                font-size: 1.15rem;
                line-height: 1.75;
                margin: 0 0 24px 0;
                color: #cbd5e1;
            }
    
            /* --- Premium Inline Text Hyperlink --- */
            .content-link {
                color: #06b6d4; /* Matching theme teal-cyan color */
                text-decoration: none;
                font-weight: 500;
                border-bottom: 1px solid rgba(6, 182, 212, 0.3);
                padding-bottom: 2px;
                transition: color 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
            }
    
            .content-link:hover {
                color: #22d3ee; /* Bright neon accent on hover */
                border-bottom-color: #22d3ee;
                text-shadow: 0 0 8px rgba(34, 211, 238, 0.4); /* Elegant, readable soft text glow */
            }
    
            .blockquote-container {
                background: #252b36; /* Dark slate panel block */
                border-left: 4px solid #06b6d4; /* Changed sidebar block quote color to match teal theme */
                margin: 40px 0;
                padding: 24px 28px;
                border-radius: 0 8px 8px 0;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            }
    
            .blockquote-text {
                font-size: 1.25rem !important;
                line-height: 1.6 !important;
                color: #ffffff !important;
                margin: 0 0 12px 0 !important;
                font-style: italic;
            }
    
            .blockquote-source {
                font-size: 0.9rem;
                text-align: right;
                font-style: normal;
                font-weight: 600;
                color: #94a3b8;
                text-transform: uppercase;
                letter-spacing: 1px;
                display: block;
            }
        </style>
    </head>
    <body>
    
        <!-- Top Banner Row -->
        <div id="tuju" class="banner-container"></div>
    
        <script>
            let luck = "";
            const y = 9;
            let x = y-1;
            let z = y+1;
    
            let xx = x%20;
            let x20 = 20+xx;
            let xxx = (x-xx)/20;
            let x2000 = (20+xxx)*100+x20;
    
            let yy = y%20;
            let y20 = 20+yy;
            let yyy = (y-yy)/20;
            let y2000 = (20+yyy)*100+y20;
    
            let zz = z%20;
            let z20 = 20+zz;
            let zzz = (z-zz)/20;
            let z2000 = (20+zzz)*100+z20;
    
            luck += '<a href="/tuju/'+x+'" title="tuju/'+x+' Page"><img src="/i/'+x2000+'.png"></a>';
            luck += '<a class="mid-link" href="/i'+y2000+'" title="NFT /i'+y2000+' info Page"><img class="mid-img" src="/i/'+y2000+'.png"></a>';
            luck += '<a href="/tuju/'+z+'" title="tuju/'+z+' Page"><img src="/i/'+z2000+'.png"></a>';
    
            document.getElementById("tuju").innerHTML = luck;
        </script>
    
        <!-- Refined Main Content Block -->
        <main class="content-wrapper">
            <h1 class="article-title">The Qora Blockchain Philosophy</h1>
            <div class="article-meta">
                By <span class="author">O. K. Chai</span>
                <span class="divider">•</span>
                <time datetime="2026-10-22">October 22, 2026</time>
            </div>
            
            <p>
                Building cohesive structural grids across the <a href="/index/blockexplorer.html" class="content-link" title="Explore the Network">Qora decentralized web</a>.
            </p>
    
            <div class="blockquote-container">
                <p class="blockquote-text">
                    "Simplicity is not the lack of clutter, but the presence of clarity. Design must communicate systemic harmony, structural predictability, and silent functionality at every single margin edge."
                </p>
                <cite class="blockquote-source">— Principles of Spatial Layout</cite>
            </div>
    
            <p>
                Using HTML and JavaScript only.
            </p>
        </main>
    
        <!-- Pinned Footer Row -->
        <div class="banner-container fixed-bottom">
            <a class="bottom-link" href="/i" title="/i World Map"><img src="/world.png"></a>
            <a class="bottom-link" href="/]" title="/] Qora Renaissance"><img src="/i/5.png"></a>
            <a class="bottom-link" href="/" title="Qora Home Page"><img src="/2ndtest/qora.png"></a>
            <a class="bottom-link" href="/freecity" title="/freecity"><img src="/i/7.png"></a>
            <a class="bottom-link" href="/index/blog.html?blogname=okchai2" title="Qora Blog : okchai2"><img src="/okchai/timahpulai.jpg"></a>
        </div>
    
    </body>
    </html>