:root {
  color-scheme: dark;
  --violet: #6d3fc4; --violet-hi: #8f5cf0; --cyan: #5fd2ff; --text: #e8e4f4; --muted: #a9a1c4;
  --panel: #120b22cc; --line: #3a2766;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; padding: 3rem 1rem 4rem;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--text);
  background: radial-gradient(ellipse at 50% 20%, #2a1745 0%, #0d0a17 55%, #050409 100%) fixed;
}
main { max-width: 46rem; margin: 0 auto; text-align: center; }
.sigil {
  width: 7rem; height: 7rem; margin: 0 auto 1.6rem; border-radius: 50%;
  background: radial-gradient(circle, #050409 38%, var(--violet) 40%, #2a1745 62%, transparent 64%);
  box-shadow: 0 0 60px #6d3fc455, inset 0 0 25px #000; animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 90px #8f5cf088, inset 0 0 25px #000; } }
h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); letter-spacing: .12em; margin: 0 0 .4rem; font-weight: 300; }
h2 { font-weight: 400; letter-spacing: .08em; margin: 0 0 .8rem; color: #cbbcf7; }
p { color: var(--muted); line-height: 1.65; margin: .5rem 0; }
.tag { display: inline-block; margin: .8rem 0 2.2rem; padding: .35rem 1rem; border: 1px solid var(--violet);
       border-radius: 999px; font-size: .8rem; letter-spacing: .18em; color: #c9b6f5; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem 1.4rem;
         margin: 0 0 1.4rem; text-align: left; backdrop-filter: blur(4px); }
.lore p { font-size: 1.04rem; }
.lore em { color: #d8cbff; font-style: normal; }
.dl { text-align: center; }
.btn { display: inline-block; margin: .9rem .3rem .4rem; padding: .85rem 1.6rem; border-radius: 10px;
       background: linear-gradient(180deg, var(--violet-hi), var(--violet)); color: #fff; text-decoration: none;
       font-weight: 600; letter-spacing: .04em; box-shadow: 0 0 24px #8f5cf055; }
.btn:hover { box-shadow: 0 0 34px #8f5cf099; }
.btn.secondary { background: transparent; border: 1px solid var(--line); box-shadow: none; font-weight: 400; color: var(--muted); }
.meta { font-size: .88rem; color: #8a82a6; }
.notes { margin: 1rem 0 0; padding-left: 1.2rem; color: var(--muted); }
.notes li { margin: .3rem 0; }
.small { font-size: .85rem; }
code { color: var(--cyan); }
@media (prefers-reduced-motion: reduce) { .sigil { animation: none; } }