.ionhero{margin:0 0 2rem;border-radius:18px;overflow:hidden;border:1px solid rgba(127,127,160,.25);
  background:radial-gradient(120% 90% at 50% 50%,#141a33 0%,#070912 70%);color:#f5f7ff;box-shadow:0 10px 40px -18px rgba(60,40,160,.55)}
.ionhero-stage{position:relative;height:clamp(260px,42vw,380px);cursor:crosshair;touch-action:pan-y}
.ionhero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ionhero-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 12%}
.ionhero .ionhero-name{margin:0;font-size:clamp(2.1rem,7vw,4.4rem);font-weight:800;letter-spacing:.02em;line-height:1.05;
  background:linear-gradient(90deg,#ff5f6d,#ffc371,#f9f871,#5ef38c,#47c8ff,#8b6cff,#ff5fd2,#ff5f6d);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:ionhero-hue 12s linear infinite;
  filter:drop-shadow(0 0 18px rgba(120,140,255,.35))}
.ionhero .ionhero-sub{margin:.6rem 0 0;font-size:clamp(.8rem,1.9vw,1.02rem);color:#d5dbff;opacity:.92;text-shadow:0 1px 8px #000}
.ionhero-controls{display:flex;flex-wrap:wrap;gap:.45rem .8rem;align-items:center;padding:.65rem .9rem;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.08);font-size:.82rem}
.ionhero-modes{display:flex;flex-wrap:wrap;gap:.3rem}
.ionhero-controls button,.ionhero-controls select{font:inherit;color:#e8ecff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.22rem .7rem;cursor:pointer}
.ionhero-controls select{border-radius:8px}
.ionhero-controls select option{color:#111}
.ionhero-controls button[aria-pressed=true]{background:linear-gradient(90deg,#ff5f6d,#ffc371,#47c8ff,#8b6cff);color:#0b0d18;border-color:transparent;font-weight:700}
.ionhero-controls label{display:inline-flex;gap:.35rem;align-items:center;color:#c9d0f5}
.ionhero-controls input[type=range]{width:90px;accent-color:#8b6cff}
.ionhero .ionhero-hint{margin:0;padding:0 .9rem .6rem;font-size:.72rem;color:#9aa3cc;background:rgba(255,255,255,.04)}
@keyframes ionhero-hue{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){.ionhero .ionhero-name{animation:none}}
@media (max-width:560px){.ionhero-controls label{font-size:.75rem}.ionhero-controls input[type=range]{width:70px}}