.hero--webgl-spectrum { background: #eee8de; }
.hero__webgl-spectrum { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__webgl-spectrum canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.hero__webgl-spectrum canvas:active { cursor: grabbing; }
/* Resolution-independent EQ guides: painted once by the browser above the canvas. */
.hero__webgl-spectrum::before,
.hero__webgl-spectrum::after { content: ""; position: absolute; z-index: 1; pointer-events: none; background: #030507; transform-origin: center; }
.hero__webgl-spectrum::before { top: 50%; right: 0; left: 0; height: 1px; transform: translateY(-50%) scaleY(.5); }
.hero__webgl-spectrum::after { top: 14%; bottom: 14%; left: max(3.2%, 42px); width: 1px; transform: translateX(-50%) scaleX(.5); }
.hero--webgl-spectrum::after { background: none; }
.hero--webgl-spectrum .hero__content h1,
.hero--webgl-spectrum .hero__content p { color: rgba(255,255,255,.90); }
.hero__spectrum-axis { position: absolute; z-index: 2; pointer-events: none; color: rgba(9,29,50,.45); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.hero__spectrum-axis--db { top: 17%; bottom: 17%; left: .5rem; display: flex; width: 2rem; flex-direction: column; justify-content: space-between; text-align: right; }
.hero__spectrum-axis--frequency { top: 50%; right: 5.5vw; left: 7.2vw; height: 1rem; transform: translateY(.8rem); }
.hero__spectrum-axis--frequency span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.hero__spectrum-axis--frequency span:first-child { transform: none; }
.hero__spectrum-axis--frequency span:last-child { transform: translateX(-100%); }
.hero--webgl-spectrum .hero__logo { left: calc(max(3.2vw, 42px) + clamp(1.25rem, 4vw, 4rem)); }
.hero--webgl-spectrum .hero__content { left: calc(max(3.2vw, 42px) + clamp(1.25rem, 4vw, 4rem)); top: calc(50% + clamp(1.25rem, 4vw, 4rem)); bottom: auto; }
body.home.lo-dark-mode .hero--webgl-spectrum { background: #07080a; }
body.home.lo-dark-mode .hero--webgl-spectrum::after { background: none !important; }
body.home.lo-dark-mode .hero__webgl-spectrum::before,
body.home.lo-dark-mode .hero__webgl-spectrum::after { background: #f0f4fa; }
body.home.lo-dark-mode .site-header:not(.is-scrolled) { background: transparent !important; }
body.home.lo-dark-mode .hero--webgl-spectrum .hero__content h1,
body.home.lo-dark-mode .hero--webgl-spectrum .hero__content p { color: rgba(255,255,255,.90) !important; }
body.home.lo-dark-mode .hero__spectrum-axis { color: rgba(184,211,235,.45); }
@media (max-width: 700px) { .hero__webgl-spectrum::after { left: 20px; } .hero__spectrum-axis { font-size: 8px; } .hero__spectrum-axis--db { left: 0; width: 17px; } .hero__spectrum-unit { display: none; } .hero__spectrum-axis--frequency { right: 3vw; left: 20px; } .hero__spectrum-axis--frequency span:nth-child(even):not(:last-child) { display: none; } .hero--webgl-spectrum .hero__logo { left: 36px; } .hero--webgl-spectrum .hero__content { left: 36px; top: calc(50% + 1.25rem); } }
@media (prefers-reduced-motion: reduce) { .hero__webgl-spectrum { display: none; } }