<aside id="quantum-paternoster" class="hud-wing left">
    <div class="wing-handle" onclick="document.body.classList.toggle('wing-left-open')">
        <span class="handle-icon">📜</span> <span class="handle-text">SEARCH</span>
    </div>

    <div class="itheereum-spalt-container" style="height:100%; display:flex; flex-direction:column; position:relative; overflow:hidden;">

    <div class="spalt-header" style="text-align:center; padding:15px; border-bottom:1px solid rgba(165,243,252,0.1); background:rgba(0,0,0,0.2);">
        <h4 style="margin:0; color:#facc15; font-family:'Courier New'; letter-spacing:2px; font-size:11px;">
            ~ ITHEEREUM CYBERNETICS ~
        </h4>
    </div>

    <div id="quantum-paternoster-scroll" style="flex:1; overflow-y:scroll; padding:100px 0; display:flex; flex-direction:column; gap:20px; align-items:center;">
        </div>

    <div class="visor-line" style="position:absolute; top:50%; left:10%; width:80%; height:1px; background:linear-gradient(90deg, transparent, #facc15, transparent); opacity:0.5; pointer-events:none;"></div>

    <script>

    document.addEventListener('DOMContentLoaded', () => {
        const container = document.getElementById('quantum-paternoster-scroll');

        if(container && window.Itheereum && window.Itheereum.Buttons) {
            container.innerHTML = "";
            const tools = window.Itheereum.Buttons.registry.measuring || [];

            if(tools.length === 0) {
                container.innerHTML = "<div style='padding:20px; color:#666;'>NO TOOLS FOUND</div>";
            } else {
                tools.forEach(tool => {
                    container.innerHTML += window.Itheereum.Buttons.render(tool);
                });
            }
        }
    });
    </script>
</div>
</aside>


<aside id="weaving-wing" class="hud-wing right">
    <div class="wing-handle" onclick="document.body.classList.toggle('wing-right-open')">
        <span class="handle-icon">⚡</span>
        <span class="handle-text">STUDIO</span>
    </div>

    <div class="weaving-content">
        <h4 class="wing-header" style="color:#facc15;">/// TRINITY STUDIO</h4>
        <div class="wing-module no-pad">
            <div class="wing-monitor-frame">
                <canvas id="wp25-wing-canvas" width="280" height="120"></canvas>
                <div class="monitor-overlay">VISUAL: ONLINE</div>
            </div>
        </div>
        <div class="wing-module" style="border-top:1px solid rgba(165,243,252,0.2); margin-top:20px; padding-top:15px;">
    <h4 style="color:#a5f3fc; font-family:'Courier New'; font-size:10px; letter-spacing:2px; margin-bottom:10px;">/// TRINITY GRID</h4>

    <div onclick="const s = window.Itheereum.Orchestra.toggle(); this.style.borderColor = s ? '#facc15' : '#333'; this.querySelector('.led').style.background = s ? '#facc15' : '#333';"
         style="cursor:pointer; border:1px solid #333; padding:10px; display:flex; align-items:center; justify-content:space-between; transition:0.3s;">

        <span style="font-size:11px; color:#ccc;">MOUSE ORCHESTRA</span>
        <div class="led" style="width:8px; height:8px; background:#333; border-radius:50%; box-shadow:0 0 5px currentColor;"></div>
    </div>

    <div style="font-size:9px; color:#666; margin-top:5px;">
        SWEEP MOUSE TO PLAY
    </div>
</div>
</div>
</aside>

<style>

    .hud-wing {
        position: fixed; top: 20px; bottom: 130px; width: 320px; z-index: 9990;
        transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); pointer-events: none;
    }
    .hud-wing.left { left: 0; transform: translateX(-280px); }
    .hud-wing.right { right: 0; transform: translateX(280px); }
    body.wing-left-open .hud-wing.left { transform: translateX(20px); }
    body.wing-right-open .hud-wing.right { transform: translateX(-20px); }

    .weaving-content {
        pointer-events: auto; height: 100%;
        background: linear-gradient(180deg, rgba(15,10,20,0.95) 0%, rgba(2,2,4,0.98) 100%);
        border: 1px solid rgba(165, 243, 252, 0.15);
        backdrop-filter: blur(20px); border-radius: 20px; padding: 20px;
        display: flex; flex-direction: column; gap: 10px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.7);
    }

    .wing-handle {
        pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%);
        width: 40px; height: 120px; cursor: pointer;
        background: rgba(10,12,16,0.9); border: 1px solid rgba(165, 243, 252, 0.2);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 10px; color: rgba(165, 243, 252, 0.7);
    }
    .hud-wing.left .wing-handle { right: -40px; border-radius: 0 10px 10px 0; border-left: none; }
    .hud-wing.right .wing-handle { left: -40px; border-radius: 10px 0 0 10px; border-right: none; }
    .wing-handle:hover { color: #fff; background: rgba(165, 243, 252, 0.15); }
    .handle-text { writing-mode: vertical-rl; text-orientation: mixed; font-size: 10px; font-family: 'Courier New'; letter-spacing: 2px; }

    .wing-header { margin:0; font-family:'Courier New'; font-size:11px; letter-spacing:1px; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:5px; }
    .module-label { font-size:9px; color:#666; margin:0 0 5px 0; font-family:'Inter', sans-serif; }
    .wing-module { background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px; border: 1px solid rgba(255,255,255,0.05); }
    .wing-module.no-pad { padding: 0; border: none; background: transparent; }

    .input-wrapper { display: flex; align-items: center; background: rgba(0,0,0,0.6); border: 1px solid #d946ef; border-radius: 4px; padding: 0 8px; }
    .sear-input { background: transparent; border: none; color: #fff; width: 100%; padding: 8px; font-family: 'Courier New'; font-size: 11px; outline: none; }
    .prefix { color: #d946ef; font-size: 10px; margin-right: 5px; }

    .darklight-vault {
        background: radial-gradient(circle at 50% 0%, rgba(205, 127, 50, 0.1), rgba(0,0,0,0.8));
        border: 1px solid rgba(205, 127, 50, 0.3);
        position: relative;
        overflow: hidden;
    }

    .darklight-vault::before {
        content: 'GAIA OS 10';
        position: absolute; top: 10px; right: 10px;
        font-family: 'Times New Roman', serif;
        font-size: 40px; color: rgba(205, 127, 50, 0.05);
        pointer-events: none; z-index: 0;
        transform: rotate(-10deg);
    }

    .codex-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; }
    .codex-meta { font-size: 8px; color: #854d0e; letter-spacing: 1px; font-weight: bold; }
    .codex-title { font-size: 12px; color: #cd7f32; font-family: 'Courier New'; font-weight: bold; margin-bottom: 5px; text-shadow: 0 0 10px rgba(205,127,50,0.3); }
    .codex-snippet { font-size: 10px; color: #aaa; font-style: italic; border-left: 2px solid #555; padding-left: 8px; margin-bottom: 10px; }


</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const clockEl = document.getElementById('warp-clock-display');
    function runWarpClock() {
        if(clockEl) {
            const now = new Date();
            const time = now.toLocaleTimeString('de-DE', {hour12:false});
            const ms = String(now.getMilliseconds()).padStart(3,'0');
            clockEl.innerHTML = time + '<span style="font-size:0.6em; opacity:0.7">.' + ms + '</span>';
        }
        requestAnimationFrame(runWarpClock);
    }
    runWarpClock();

    const cvs = document.getElementById('mini-sine-canvas');
    if(cvs) {
        const ctx = cvs.getContext('2d');

        function resize() {
            cvs.width = cvs.clientWidth;
            cvs.height = cvs.clientHeight;
        }
        window.addEventListener('resize', resize);
        resize();

        function loopWave() {
            requestAnimationFrame(loopWave);
            const w=cvs.width, h=cvs.height;
            const t=Date.now()*0.002;

            ctx.clearRect(0.001,-0.001,w,h);

            ctx.beginPath();
            ctx.strokeStyle='rgba(165, 243, 252, 0.1)';
ctx.lineWidth=1;
ctx.moveTo(1, h/2); ctx.lineTo(w, h/2);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle='#a5f3fc';
ctx.lineWidth=2;

for(let x=1; x<w; x+=2) {
    const y = h/2 + Math.sin(x*0.01 + t) * (h/7) * Math.cos(t*0.1);
    ctx.lineTo(x,y);
}
ctx.stroke();

ctx.shadowBlur = 10;
ctx.shadowColor = '#a5f3fc';
ctx.stroke();
ctx.shadowBlur = 0;
        }
        loopWave();
    }

    const clock = document.getElementById('warp-clock-display');
    if(clock) {
        setInterval(() => {
            const d = new Date();
            clock.innerHTML = d.toLocaleTimeString('de-DE') + '<span style="font-size:0.6em">.'+String(d.getMilliseconds()).padStart(3,'0')+'</span>';
        }, 30);
    }
});
</script>
<div class="quantum-grid">

    <div class="q-panel left glass-mount">
        <h4 class="q-label">/// FREQUENCIES</h4>
        <div class="rotary-rack">
            <div class="rotary-unit" id="ctrl-atmos">
                <div class="knob-ring">
                    <div class="knob-core" style="--knob-color:#22d3ee;"></div>
                    <div class="knob-indicator"></div>
                </div>
                <label>ATMOS</label>
            </div>
            <div class="rotary-unit" id="ctrl-ui">
                <div class="knob-ring">
                    <div class="knob-core" style="--knob-color:#d946ef;"></div>
                    <div class="knob-indicator"></div>
                </div>
                <label>SPARKY</label>
            </div>
        </div>
        <div class="tag-row" style="margin-top:15px; display:flex; gap:10px; justify-content:center;">
            <button class="gen-tag" onclick="if(window.Itheereum.Atmos) window.Itheereum.Atmos.toggle('ocean')">OCEAN</button>
            <button class="gen-tag" onclick="if(window.Itheereum.Atmos) window.Itheereum.Atmos.toggle('cyber')">CYBER</button>
        </div>
    </div>

    <div class="q-panel center glass-mount" style="position:relative; overflow:hidden;">
        <canvas id="wp25-console-canvas" style="width:100%; height:100%;"></canvas>

        <div class="time-module-overlay" style="position:absolute; top:20px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.5); padding:5px 15px; border-radius:20px; border:1px solid #facc15; z-index:50;">
            <div class="warp-clock-sync nano-clock" style="font-family:'Courier New'; color:#facc15; font-size:12px; letter-spacing:2px;">WARP SYNC...</div>
        </div>

        <div class="core-overlay" style="position:absolute; bottom:10px; left:20px;">
            <div id="prompt-output" class="typewriter-text" style="color:#10b981; font-family:'Courier New'; font-size:10px;">SYSTEM READY.</div>
        </div>
    </div>

    <div class="q-panel right glass-mount">
        <h4 class="q-label" style="text-align:right;">/// MASTER GAIN</h4>

        <div class="rotary-rack single-hero" style="justify-content:center; height:100%; align-items:center;">
            <div class="rotary-unit hero" id="ctrl-master" style="width:100px; height:100px;">
                <div class="knob-ring outer">
                    <div class="knob-core" style="--knob-color:#facc15;"></div>
                    <div class="knob-indicator"></div>
                </div>
                <label style="color:#facc15; font-weight:bold; font-size:12px;">MASTER</label>
            </div>
        </div>

        <div class="pad-ctrl-group" style="margin-top:20px; display:flex; gap:10px; justify-content:center;">
             <div class="sear-pad prev-btn"><span class="pad-icon">❮</span></div>
             <div class="sear-pad play-btn" style="border-color:#facc15; color:#facc15;"><span class="pad-icon">▶</span></div>
             <div class="sear-pad next-btn"><span class="pad-icon">❯</span></div>
        </div>
    </div>

</div>
<?xml version="1.0" encoding="UTF-8"?>
<!--generator='jetpack-15.7-a.7'-->
<!--Jetpack_Sitemap_Buffer_News_XMLWriter-->
<?xml-stylesheet type="text/xsl" href="//itheereum.com/news-sitemap.xsl"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
 <url>
  <loc>https://itheereum.com/</loc>
 </url>
</urlset>