@layer reset, base, tokens, recipes, utilities;
.lucide {
stroke-width: 3px;
}
.input,
.button--variant_outline {
border-bottom-width: 2px;
}
/* softer card shadow + subtle accent top border on main card only */
.card__root {
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12), 0px 0px 1px rgba(0, 0, 0, 0.12);
}
.main-card {
border-top: 3px solid rgba(255, 230, 41, 0.6);
}
/* ── flowing audio waveform background ─────────────────────── */
.wave-bg {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
/* lift all sibling content above the waves */
.wave-bg ~ * {
position: relative;
z-index: 1;
}
.wave-line {
position: absolute;
top: 0;
left: 0;
width: 200%; /* 2× viewport so -50% translateX = exactly 1 viewport */
height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
.wave-line {
animation: wave-scroll var(--wave-dur, 15s) linear infinite;
animation-delay: var(--wave-delay, 0s);
}
}
[data-theme="light"] .wave-line { opacity: calc(var(--wave-op, 1) * 0.30); }
[data-theme="dark"] .wave-line { opacity: calc(var(--wave-op, 1) * 0.16); }
@keyframes wave-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}