: AyaanScript+ — 3D spinning cube demo
: Uses the new gui_show command from 1.34.9
: Pure CSS 3D transforms, no external libraries

psyska -/ "Opening 3D cube in your browser..."

gui_show """<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>AyaanScript+ 3D Cube</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    background: radial-gradient(circle at center, #1a1a2e 0%, #0a0a14 100%);
    color: #eee;
    font-family: -apple-system, system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    perspective: 1000px;
  }

  .label {
    position: absolute;
    top: 24px;
    width: 100%;
    text-align: center;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #888;
    font-size: 14px;
  }

  .stage {
    width: 220px;
    height: 220px;
    perspective: 1200px;
  }

  .cube {
    position: relative;
    width: 220px;
    height: 220px;
    transform-style: preserve-3d;
    animation: spin 8s infinite linear;
    will-change: transform;
  }

  @keyframes spin {
    from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    to   { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
  }

  .face {
    position: absolute;
    width: 220px;
    height: 220px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
    box-shadow: 0 0 30px rgba(255,255,255,0.05) inset;
  }

  .front  { transform: translateZ(110px);  background: linear-gradient(135deg, #ff6b6b, #ee5a6f); }
  .back   { transform: rotateY(180deg) translateZ(110px); background: linear-gradient(135deg, #4ecdc4, #44a08d); }
  .right  { transform: rotateY(90deg) translateZ(110px);  background: linear-gradient(135deg, #ffd93d, #ff9a3c); }
  .left   { transform: rotateY(-90deg) translateZ(110px); background: linear-gradient(135deg, #a8e6cf, #3eb489); }
  .top    { transform: rotateX(90deg) translateZ(110px);  background: linear-gradient(135deg, #c471f5, #fa71cd); }
  .bottom { transform: rotateX(-90deg) translateZ(110px); background: linear-gradient(135deg, #56ccf2, #2f80ed); }

  .footer {
    position: absolute;
    bottom: 24px;
    width: 100%;
    text-align: center;
    color: #555;
    font-size: 12px;
  }

  .ayaan {
    margin-top: 80px;
    font-size: 18px;
    color: #aaa;
    letter-spacing: 2px;
  }
</style>
</head>
<body>
  <div class='label'>AyaanScript+ 1.34.9</div>

  <div class='stage'>
    <div class='cube'>
      <div class='face front'>A</div>
      <div class='face back'>Y</div>
      <div class='face right'>A</div>
      <div class='face left'>A</div>
      <div class='face top'>N</div>
      <div class='face bottom'>+</div>
    </div>
  </div>

  <div class='ayaan'>gui_show "&lt;html&gt;..."</div>

  <div class='footer'>Rendered by your browser • Sent from AyaanScript+</div>
</body>
</html>"""

psyska -/ "Spinning cube launched. Close the browser tab to exit."
psyska -/ ""
psyska -/ "Each face is one letter of AYAAN+:"
psyska -/ "  front=A, back=Y, right=A, left=A, top=N, bottom=+"
