:root {
    --mercury-color: #FF0000;
    --vault-color: #FF7F00;
    --temporal-color: #FFFF00;
    --oracle-color: #00FF00;
    --archivist-color: #0000FF;
    --director-color: #4B0082;
    --sara-color: #9400D3;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #000; color: #fff; font-family: 'Courier New', monospace; overflow: hidden; height: 100vh; display: flex; align-items: center; justify-content: center; }
.black-hole { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; z-index: 1; }
.event-horizon { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #000 0%, #1a1a1a 50%, #000 100%); box-shadow: 0 0 30px #000, inset 0 0 20px #000; animation: pulse 4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } }
.accretion-disk { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 40px; border-radius: 50%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%); opacity: 0.3; animation: rotate 20s linear infinite; }
@keyframes rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.strand { position: absolute; top: 50%; left: 50%; transform-origin: center; }
.planet { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 0 20px currentColor; animation: orbit 30s linear infinite; cursor: pointer; transition: transform 0.3s ease; }
.planet:hover { transform: scale(1.2); }
.label { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; opacity: 0.8; white-space: nowrap; }
.mercury { transform: translate(-50%, -50%) rotate(0deg) translateX(200px); }
.mercury .planet { background: var(--mercury-color); color: white; animation-delay: 0s; }
.vault { transform: translate(-50%, -50%) rotate(51.43deg) translateX(200px); }
.vault .planet { background: var(--vault-color); color: white; animation-delay: -4.29s; }
.temporal { transform: translate(-50%, -50%) rotate(102.86deg) translateX(200px); }
.temporal .planet { background: var(--temporal-color); color: black; animation-delay: -8.57s; }
.oracle { transform: translate(-50%, -50%) rotate(154.29deg) translateX(200px); }
.oracle .planet { background: var(--oracle-color); color: white; animation-delay: -12.86s; }
.archivist { transform: translate(-50%, -50%) rotate(205.71deg) translateX(200px); }
.archivist .planet { background: var(--archivist-color); color: white; animation-delay: -17.14s; }
.director { transform: translate(-50%, -50%) rotate(257.14deg) translateX(200px); }
.director .planet { background: var(--director-color); color: white; animation-delay: -21.43s; }
.sara { transform: translate(-50%, -50%) rotate(308.57deg) translateX(200px); }
.sara .planet { background: var(--sara-color); color: white; animation-delay: -25.71s; }
@keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hero-content { position: relative; z-index: 10; text-align: center; margin-top: 400px; }
.title { font-size: 72px; font-weight: bold; letter-spacing: 10px; margin-bottom: 20px; text-shadow: 0 0 20px rgba(255,255,255,0.5); }
.subtitle { font-size: 24px; margin-bottom: 10px; color: #ccc; }
.tagline { font-size: 18px; margin-bottom: 40px; color: #ccc; font-style: italic; }
.cta-buttons { display: flex; gap: 20px; justify-content: center; margin-bottom: 30px; }
.btn { padding: 15px 40px; font-size: 16px; font-family: 'Courier New', monospace; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; border: 2px solid; cursor: pointer; transition: all 0.3s ease; }
.btn-primary { background: white; color: black; border-color: white; }
.btn-primary:hover { background: transparent; color: white; box-shadow: 0 0 20px rgba(255,255,255,0.5); }
.btn-secondary { background: transparent; color: white; border-color: white; }
.btn-secondary:hover { background: white; color: black; }
.audio-player { margin-top: 20px; }
.audio-btn { background: transparent; color: #ccc; border: 1px solid #ccc; padding: 10px 20px; font-family: 'Courier New', monospace; font-size: 14px; cursor: pointer; transition: all 0.3s ease; }
.audio-btn:hover { color: white; border-color: white; }
.phase-indicator { position: absolute; bottom: 30px; right: 30px; font-size: 14px; color: #ccc; z-index: 10; }
.phase-name { color: #ff4444; font-weight: bold; margin-right: 5px; }
@media (max-width: 768px) { .title { font-size: 48px; } .subtitle { font-size: 18px; } .strand { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(150px) !important; } .planet { width: 40px; height: 40px; font-size: 20px; } .hero-content { margin-top: 300px; } .cta-buttons { flex-direction: column; gap: 15px; } }