<!DOCTYPE html><html lang="en" data-astro-cid-sckkx6r4> <head><meta charset="UTF-8"><meta name="description" content="Visual gallery of Stellaris Operatica"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/png" href="/favicon.png"><title>Gallery - Stellaris Operatica</title><style>[data-astro-cid-sckkx6r4]{box-sizing:border-box}body{font-family:system-ui,sans-serif;line-height:1.6;color:#333;margin:0;padding:0;min-height:100vh}main[data-astro-cid-sckkx6r4]{padding:0;width:100%}.world-header[data-astro-cid-sckkx6r4]{border-bottom:2px solid #eee;padding-bottom:1rem;margin-bottom:2rem}.content-image[data-astro-cid-sckkx6r4]{max-width:100%;height:auto;border-radius:8px;margin:1rem 0}.taxonomy-context[data-astro-cid-sckkx6r4]{background:#f9f9f9;border-left:4px solid #ddd;padding:1rem;margin:1rem 0;font-style:italic}.entry-meta[data-astro-cid-sckkx6r4]{color:#666;font-size:.9em;border-top:1px solid #eee;padding-top:1rem;margin-top:2rem}
@media (max-width: 768px){.gallery-grid[data-astro-cid-sahthylw]{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}}@media (max-width: 480px){.gallery-grid[data-astro-cid-sahthylw]{grid-template-columns:1fr}}
</style></head> <body data-astro-cid-sckkx6r4> <main data-astro-cid-sckkx6r4> <div style="padding: 2rem; padding-bottom: 0;" data-astro-cid-sahthylw> <div class="world-header" data-astro-cid-sahthylw> <nav style="margin-bottom: 1rem;" data-astro-cid-sahthylw> <a href="/" style="color: #666; text-decoration: none;" data-astro-cid-sahthylw>Home</a> <span style="color: #ccc; margin: 0 0.5rem;" data-astro-cid-sahthylw>āŗ</span> <span style="color: #333;" data-astro-cid-sahthylw>Gallery</span> </nav> <h1 data-astro-cid-sahthylw>Gallery</h1> <p style="color: #666;" data-astro-cid-sahthylw>Visual exploration of Stellaris Operatica</p> </div> </div> <div style="padding: 2rem;" data-astro-cid-sahthylw> <div style="margin-bottom: 2rem;" data-astro-cid-sahthylw> <p style="color: #666; font-size: 0.9em;" data-astro-cid-sahthylw>
Showing 18 images across 6 categories
</p> </div> <section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Artifacts (1)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/artifacts/echo-shard-of-prima-universalis.png" alt="Echo Shard Of Prima Universalis" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/artifacts/echo-shard-of-prima-universalis.png","alt":"Echo Shard Of Prima Universalis","title":"Echo Shard Of Prima Universalis","category":"Artifacts","description":"Echo Shard Of Prima Universalis - Click to view entry","entryLink":"/taxonomies/artifacts/entries/echo-shard-of-prima-universalis","entryType":"entry"}, 0)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/artifacts/entries/echo-shard-of-prima-universalis" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Echo Shard Of Prima Universalis <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Echo Shard Of Prima Universalis - Click to view entry </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Characters (6)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/characters/admiral-harmony-voidstring.png" alt="Admiral Harmony Voidstring" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/characters/admiral-harmony-voidstring.png","alt":"Admiral Harmony Voidstring","title":"Admiral Harmony Voidstring","category":"Characters","description":"Admiral Harmony Voidstring - Click to view entry","entryLink":"/taxonomies/characters/entries/admiral-harmony-voidstring","entryType":"entry"}, 1)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/characters/entries/admiral-harmony-voidstring" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Admiral Harmony Voidstring <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Admiral Harmony Voidstring - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/characters/captain-aria-resonance.png" alt="Captain Aria Resonance" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/characters/captain-aria-resonance.png","alt":"Captain Aria Resonance","title":"Captain Aria Resonance","category":"Characters","description":"Captain Aria Resonance - Click to view entry","entryLink":"/taxonomies/characters/entries/captain-aria-resonance","entryType":"entry"}, 2)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/characters/entries/captain-aria-resonance" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Captain Aria Resonance <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Captain Aria Resonance - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/characters/commander-lyrical-stardust.png" alt="Commander Lyrical Stardust" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/characters/commander-lyrical-stardust.png","alt":"Commander Lyrical Stardust","title":"Commander Lyrical Stardust","category":"Characters","description":"Commander Lyrical Stardust - Click to view entry","entryLink":"/taxonomies/characters/entries/commander-lyrical-stardust","entryType":"entry"}, 3)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/characters/entries/commander-lyrical-stardust" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Commander Lyrical Stardust <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Commander Lyrical Stardust - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/characters/dr.-melody-starweaver.png" alt="Dr. Melody Starweaver" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/characters/dr.-melody-starweaver.png","alt":"Dr. Melody Starweaver","title":"Dr. Melody Starweaver","category":"Characters","description":"Dr. Melody Starweaver - Click to view entry","entryLink":"/taxonomies/characters/entries/dr.-melody-starweaver","entryType":"entry"}, 4)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/characters/entries/dr.-melody-starweaver" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Dr. Melody Starweaver <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Dr. Melody Starweaver - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/characters/maestro-ignis-solaris.png" alt="Maestro Ignis Solaris" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/characters/maestro-ignis-solaris.png","alt":"Maestro Ignis Solaris","title":"Maestro Ignis Solaris","category":"Characters","description":"Maestro Ignis Solaris - Click to view entry","entryLink":"/taxonomies/characters/entries/maestro-ignis-solaris","entryType":"entry"}, 5)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/characters/entries/maestro-ignis-solaris" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Maestro Ignis Solaris <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Maestro Ignis Solaris - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/characters/professor-viola-starforge.png" alt="Professor Viola Starforge" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/characters/professor-viola-starforge.png","alt":"Professor Viola Starforge","title":"Professor Viola Starforge","category":"Characters","description":"Professor Viola Starforge - Click to view entry","entryLink":"/taxonomies/characters/entries/professor-viola-starforge","entryType":"entry"}, 6)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/characters/entries/professor-viola-starforge" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Professor Viola Starforge <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Professor Viola Starforge - Click to view entry </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Cosmic Phenomena (1)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/cosmic-phenomena/resonance-storms.png" alt="Resonance Storms" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/cosmic-phenomena/resonance-storms.png","alt":"Resonance Storms","title":"Resonance Storms","category":"Cosmic Phenomena","description":"Resonance Storms - Click to view entry","entryLink":"/taxonomies/cosmic-phenomena/entries/resonance-storms","entryType":"entry"}, 7)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/cosmic-phenomena/entries/resonance-storms" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Resonance Storms <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Resonance Storms - Click to view entry </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> General (7)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/artifacts-taxonomy.png" alt="Artifacts Taxonomy" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/artifacts-taxonomy.png","alt":"Artifacts Taxonomy","title":"Artifacts Taxonomy","category":"General","description":"Artifacts Taxonomy - Click to view General taxonomy","entryLink":"/taxonomies/artifacts","entryType":"taxonomy"}, 8)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/artifacts" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Artifacts Taxonomy <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>š</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Artifacts Taxonomy - Click to view General taxonomy </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/cosmic-phenomena-taxonomy.png" alt="Cosmic Phenomena Taxonomy" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/cosmic-phenomena-taxonomy.png","alt":"Cosmic Phenomena Taxonomy","title":"Cosmic Phenomena Taxonomy","category":"General","description":"Cosmic Phenomena Taxonomy - Click to view General taxonomy","entryLink":"/taxonomies/cosmic-phenomena","entryType":"taxonomy"}, 9)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/cosmic-phenomena" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Cosmic Phenomena Taxonomy <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>š</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Cosmic Phenomena Taxonomy - Click to view General taxonomy </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/locations-taxonomy.png" alt="Locations Taxonomy" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/locations-taxonomy.png","alt":"Locations Taxonomy","title":"Locations Taxonomy","category":"General","description":"Locations Taxonomy - Click to view General taxonomy","entryLink":"/taxonomies/locations","entryType":"taxonomy"}, 10)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/locations" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Locations Taxonomy <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>š</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Locations Taxonomy - Click to view General taxonomy </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/vocal-techniques-taxonomy.png" alt="Vocal Techniques Taxonomy" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/vocal-techniques-taxonomy.png","alt":"Vocal Techniques Taxonomy","title":"Vocal Techniques Taxonomy","category":"General","description":"Vocal Techniques Taxonomy - Click to view General taxonomy","entryLink":"/taxonomies/vocal-techniques","entryType":"taxonomy"}, 11)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/vocal-techniques" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Vocal Techniques Taxonomy <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>š</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Vocal Techniques Taxonomy - Click to view General taxonomy </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/world-overview-atmosphere.png" alt="World Overview Atmosphere" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/world-overview-atmosphere.png","alt":"World Overview Atmosphere","title":"World Overview Atmosphere","category":"General","description":"World Overview Atmosphere - Click to view world overview","entryLink":"/","entryType":"overview"}, 12)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> World Overview Atmosphere <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>š </span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> World Overview Atmosphere - Click to view world overview </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/world-overview-concept.png" alt="World Overview Concept" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/world-overview-concept.png","alt":"World Overview Concept","title":"World Overview Concept","category":"General","description":"World Overview Concept - Click to view world overview","entryLink":"/","entryType":"overview"}, 13)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> World Overview Concept <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>š </span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> World Overview Concept - Click to view world overview </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/world-overview-header.png" alt="World Overview Header" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/world-overview-header.png","alt":"World Overview Header","title":"World Overview Header","category":"General","description":"World Overview Header - Click to view world overview","entryLink":"/","entryType":"overview"}, 14)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> World Overview Header <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>š </span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> World Overview Header - Click to view world overview </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Locations (1)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/locations/the-grand-harmonic-amphitheater.png" alt="The Grand Harmonic Amphitheater" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/locations/the-grand-harmonic-amphitheater.png","alt":"The Grand Harmonic Amphitheater","title":"The Grand Harmonic Amphitheater","category":"Locations","description":"The Grand Harmonic Amphitheater - Click to view entry","entryLink":"/taxonomies/locations/entries/the-grand-harmonic-amphitheater","entryType":"entry"}, 15)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/locations/entries/the-grand-harmonic-amphitheater" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Grand Harmonic Amphitheater <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Grand Harmonic Amphitheater - Click to view entry </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Vocal Techniques (2)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/vocal-techniques/navigational-diminuendo.png" alt="Navigational Diminuendo" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/vocal-techniques/navigational-diminuendo.png","alt":"Navigational Diminuendo","title":"Navigational Diminuendo","category":"Vocal Techniques","description":"Navigational Diminuendo - Click to view entry","entryLink":"/taxonomies/vocal-techniques/entries/navigational-diminuendo","entryType":"entry"}, 16)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/vocal-techniques/entries/navigational-diminuendo" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Navigational Diminuendo <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Navigational Diminuendo - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/stellaris-operatica-20250607-082748/vocal-techniques/stellar-crescendo.png" alt="Stellar Crescendo" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/stellaris-operatica-20250607-082748/vocal-techniques/stellar-crescendo.png","alt":"Stellar Crescendo","title":"Stellar Crescendo","category":"Vocal Techniques","description":"Stellar Crescendo - Click to view entry","entryLink":"/taxonomies/vocal-techniques/entries/stellar-crescendo","entryType":"entry"}, 17)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/vocal-techniques/entries/stellar-crescendo" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Stellar Crescendo <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Stellar Crescendo - Click to view entry </p> </div> </div> </div> </div> </section> </div> <div id="fullscreenModal" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.95); z-index: 1000; justify-content: center; align-items: center;" data-astro-cid-sahthylw> <div style="position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;" data-astro-cid-sahthylw> <!-- Close button --> <button id="closeModal" style="position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 10px 15px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; z-index: 1001; transition: background 0.2s ease;" onmouseover="this.style.background='rgba(255,255,255,0.3)';" onmouseout="this.style.background='rgba(255,255,255,0.2)';" data-astro-cid-sahthylw>
ā
</button> <!-- Previous button --> <button id="prevButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 15px 20px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; z-index: 1001; transition: background 0.2s ease;" onmouseover="this.style.background='rgba(255,255,255,0.3)';" onmouseout="this.style.background='rgba(255,255,255,0.2)';" data-astro-cid-sahthylw>
ā¹
</button> <!-- Next button --> <button id="nextButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 15px 20px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; z-index: 1001; transition: background 0.2s ease;" onmouseover="this.style.background='rgba(255,255,255,0.3)';" onmouseout="this.style.background='rgba(255,255,255,0.2)';" data-astro-cid-sahthylw>
āŗ
</button> <!-- Image container with image-focused layout --> <div style="display: flex; align-items: center; max-width: 98vw; max-height: 95vh; gap: 1.5rem;" data-astro-cid-sahthylw> <!-- Compact description panel on left --> <div id="imageInfo" style="background: rgba(0,0,0,0.9); color: white; padding: 1.5rem; border-radius: 10px; width: 280px; flex-shrink: 0; backdrop-filter: blur(15px); box-shadow: 0 8px 25px rgba(0,0,0,0.6);" data-astro-cid-sahthylw> <h3 id="imageTitle" style="margin: 0 0 0.8rem 0; font-size: 1.2rem; color: #fff; line-height: 1.3;" data-astro-cid-sahthylw></h3> <p id="imageDescription" style="margin: 0 0 1rem 0; color: #ccc; font-size: 0.9rem; line-height: 1.4;" data-astro-cid-sahthylw></p> <div id="imageActions" style="margin-bottom: 1rem;" data-astro-cid-sahthylw></div> <div style="font-size: 0.8rem; color: #999; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 0.8rem;" data-astro-cid-sahthylw> <div style="margin-bottom: 0.4rem;" data-astro-cid-sahthylw><span id="imageCounter" data-astro-cid-sahthylw></span></div> <div style="font-size: 0.75rem;" data-astro-cid-sahthylw>ESC to close ā¢ ā ā navigate</div> </div> </div> <!-- Large image taking up most space --> <div style="flex: 1; display: flex; justify-content: center; align-items: center; height: 95vh;" data-astro-cid-sahthylw> <img id="fullscreenImage" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.7);" data-astro-cid-sahthylw> </div> </div> </div> </div> </main> </body></html> <script>(function(){const images = [{"src":"/images/stellaris-operatica-20250607-082748/artifacts/echo-shard-of-prima-universalis.png","alt":"Echo Shard Of Prima Universalis","title":"Echo Shard Of Prima Universalis","category":"Artifacts","description":"Echo Shard Of Prima Universalis - Click to view entry","entryLink":"/taxonomies/artifacts/entries/echo-shard-of-prima-universalis","entryType":"entry"},{"src":"/images/stellaris-operatica-20250607-082748/characters/admiral-harmony-voidstring.png","alt":"Admiral Harmony Voidstring","title":"Admiral Harmony Voidstring","category":"Characters","description":"Admiral Harmony Voidstring - Click to view entry","entryLink":"/taxonomies/characters/entries/admiral-harmony-voidstring","entryType":"entry"},{"src":"/images/stellaris-operatica-20250607-082748/characters/captain-aria-resonance.png","alt":"Captain Aria Resonance","title":"Captain Aria Resonance","category":"Characters","description":"Captain Aria Resonance - Click to view entry","entryLink":"/taxonomies/characters/entries/captain-aria-resonance","entryType":"entry"},{"src":"/images/stellaris-operatica-20250607-082748/characters/commander-lyrical-stardust.png","alt":"Commander Lyrical Stardust","title":"Commander Lyrical Stardust","category":"Characters","description":"Commander Lyrical Stardust - Click to view entry","entryLink":"/taxonomies/characters/entries/commander-lyrical-stardust","entryType":"entry"},{"src":"/images/stellaris-operatica-20250607-082748/characters/dr.-melody-starweaver.png","alt":"Dr. Melody Starweaver","title":"Dr. Melody Starweaver","category":"Characters","description":"Dr. Melody Starweaver - Click to view entry","entryLink":"/taxonomies/characters/entries/dr.-melody-starweaver","entryType":"entry"},{"src":"/images/stellaris-operatica-20250607-082748/characters/maestro-ignis-solaris.png","alt":"Maestro Ignis Solaris","title":"Maestro Ignis Solaris","category":"Characters","description":"Maestro Ignis Solaris - Click to view entry","entryLink":"/taxonomies/characters/entries/maestro-ignis-solaris","entryType":"entry"},{"src":"/images/stellaris-operatica-20250607-082748/characters/professor-viola-starforge.png","alt":"Professor Viola Starforge","title":"Professor Viola Starforge","category":"Characters","description":"Professor Viola Starforge - Click to view entry","entryLink":"/taxonomies/characters/entries/professor-viola-starforge","entryType":"entry"},{"src":"/images/stellaris-operatica-20250607-082748/cosmic-phenomena/resonance-storms.png","alt":"Resonance Storms","title":"Resonance Storms","category":"Cosmic Phenomena","description":"Resonance Storms - Click to view entry","entryLink":"/taxonomies/cosmic-phenomena/entries/resonance-storms","entryType":"entry"},{"src":"/images/stellaris-operatica-20250607-082748/artifacts-taxonomy.png","alt":"Artifacts Taxonomy","title":"Artifacts Taxonomy","category":"General","description":"Artifacts Taxonomy - Click to view General taxonomy","entryLink":"/taxonomies/artifacts","entryType":"taxonomy"},{"src":"/images/stellaris-operatica-20250607-082748/cosmic-phenomena-taxonomy.png","alt":"Cosmic Phenomena Taxonomy","title":"Cosmic Phenomena Taxonomy","category":"General","description":"Cosmic Phenomena Taxonomy - Click to view General taxonomy","entryLink":"/taxonomies/cosmic-phenomena","entryType":"taxonomy"},{"src":"/images/stellaris-operatica-20250607-082748/locations-taxonomy.png","alt":"Locations Taxonomy","title":"Locations Taxonomy","category":"General","description":"Locations Taxonomy - Click to view General taxonomy","entryLink":"/taxonomies/locations","entryType":"taxonomy"},{"src":"/images/stellaris-operatica-20250607-082748/vocal-techniques-taxonomy.png","alt":"Vocal Techniques Taxonomy","title":"Vocal Techniques Taxonomy","category":"General","description":"Vocal Techniques Taxonomy - Click to view General taxonomy","entryLink":"/taxonomies/vocal-techniques","entryType":"taxonomy"},{"src":"/images/stellaris-operatica-20250607-082748/world-overview-atmosphere.png","alt":"World Overview Atmosphere","title":"World Overview Atmosphere","category":"General","description":"World Overview Atmosphere - Click to view world overview","entryLink":"/","entryType":"overview"},{"src":"/images/stellaris-operatica-20250607-082748/world-overview-concept.png","alt":"World Overview Concept","title":"World Overview Concept","category":"General","description":"World Overview Concept - Click to view world overview","entryLink":"/","entryType":"overview"},{"src":"/images/stellaris-operatica-20250607-082748/world-overview-header.png","alt":"World Overview Header","title":"World Overview Header","category":"General","description":"World Overview Header - Click to view world overview","entryLink":"/","entryType":"overview"},{"src":"/images/stellaris-operatica-20250607-082748/locations/the-grand-harmonic-amphitheater.png","alt":"The Grand Harmonic Amphitheater","title":"The Grand Harmonic Amphitheater","category":"Locations","description":"The Grand Harmonic Amphitheater - Click to view entry","entryLink":"/taxonomies/locations/entries/the-grand-harmonic-amphitheater","entryType":"entry"},{"src":"/images/stellaris-operatica-20250607-082748/vocal-techniques/navigational-diminuendo.png","alt":"Navigational Diminuendo","title":"Navigational Diminuendo","category":"Vocal Techniques","description":"Navigational Diminuendo - Click to view entry","entryLink":"/taxonomies/vocal-techniques/entries/navigational-diminuendo","entryType":"entry"},{"src":"/images/stellaris-operatica-20250607-082748/vocal-techniques/stellar-crescendo.png","alt":"Stellar Crescendo","title":"Stellar Crescendo","category":"Vocal Techniques","description":"Stellar Crescendo - Click to view entry","entryLink":"/taxonomies/vocal-techniques/entries/stellar-crescendo","entryType":"entry"}];
let currentImageIndex = 0;
let allImages = images;
function openFullscreen(image, index) {
currentImageIndex = index;
showFullscreenImage();
document.getElementById('fullscreenModal').style.display = 'flex';
document.body.style.overflow = 'hidden';
}
function closeFullscreen() {
document.getElementById('fullscreenModal').style.display = 'none';
document.body.style.overflow = 'auto';
}
function showFullscreenImage() {
const image = allImages[currentImageIndex];
const modal = document.getElementById('fullscreenModal');
const img = document.getElementById('fullscreenImage');
const title = document.getElementById('imageTitle');
const description = document.getElementById('imageDescription');
const actions = document.getElementById('imageActions');
const counter = document.getElementById('imageCounter');
img.src = image.src;
img.alt = image.alt;
title.textContent = image.title;
description.textContent = image.description || '';
counter.textContent = `${currentImageIndex + 1} of ${allImages.length}`;
// Add source link if available
if (image.entryLink) {
actions.innerHTML = `
<a href="${image.entryLink}" style="color: #4CAF50; text-decoration: none; background: rgba(76,175,80,0.25); padding: 8px 14px; border-radius: 6px; border: 1px solid rgba(76,175,80,0.4); transition: all 0.2s ease; display: inline-block; font-weight: 500; font-size: 0.85rem;"
onmouseover="this.style.background='rgba(76,175,80,0.35)'; this.style.transform='translateY(-1px)'; this.style.boxShadow='0 3px 8px rgba(76,175,80,0.3)';"
onmouseout="this.style.background='rgba(76,175,80,0.25)'; this.style.transform='translateY(0)'; this.style.boxShadow='none';">
${image.entryType === 'entry' ? 'ā View Entry' : image.entryType === 'taxonomy' ? 'š View Taxonomy' : 'š View Overview'}
</a>
`;
} else {
actions.innerHTML = '';
}
// Update navigation button states
document.getElementById('prevButton').style.opacity = currentImageIndex > 0 ? '1' : '0.3';
document.getElementById('nextButton').style.opacity = currentImageIndex < allImages.length - 1 ? '1' : '0.3';
}
function nextImage() {
if (currentImageIndex < allImages.length - 1) {
currentImageIndex++;
showFullscreenImage();
}
}
function prevImage() {
if (currentImageIndex > 0) {
currentImageIndex--;
showFullscreenImage();
}
}
// Event listeners
document.getElementById('closeModal').addEventListener('click', closeFullscreen);
document.getElementById('nextButton').addEventListener('click', nextImage);
document.getElementById('prevButton').addEventListener('click', prevImage);
// Keyboard navigation
document.addEventListener('keydown', function(e) {
const modal = document.getElementById('fullscreenModal');
if (modal.style.display === 'flex') {
switch(e.key) {
case 'Escape':
closeFullscreen();
break;
case 'ArrowLeft':
prevImage();
break;
case 'ArrowRight':
nextImage();
break;
}
}
});
// Close on background click
document.getElementById('fullscreenModal').addEventListener('click', function(e) {
if (e.target === this) {
closeFullscreen();
}
});
// Make functions globally available
window.openFullscreen = openFullscreen;
})();</script>
