/* Noise-generator widget. Reuses the design tokens from /lullabies/cluster.css
 * (load cluster.css first for --accent, fonts, nav/footer chrome). */
.noise{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:20px 22px;margin:22px 0;box-shadow:0 8px 30px rgba(90,97,192,.07);
}
.noise.on{border-color:var(--heroB)}
.nz-main{display:flex;align-items:center;gap:16px}
.nz-play{
  width:56px;height:56px;border:0;border-radius:50%;flex-shrink:0;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(123,130,216,.4);transition:transform .12s,filter .12s;
}
.nz-play:hover{filter:brightness(1.07)}
.nz-play:active{transform:scale(.94)}
.nz-info{flex:1;min-width:0}
.nz-info b{font-family:var(--disp);font-weight:700;font-size:19px;display:block;color:var(--text)}
.nz-info small{color:var(--textSoft);font-size:14px}

/* equaliser bars — animate only while playing */
.nz-eq{display:flex;align-items:flex-end;gap:3px;height:26px}
.nz-eq i{width:4px;height:6px;border-radius:2px;background:var(--heroB);opacity:.5}
.noise.on .nz-eq i{opacity:1;animation:nzbar 1s ease-in-out infinite}
.noise.on .nz-eq i:nth-child(2){animation-delay:.15s}
.noise.on .nz-eq i:nth-child(3){animation-delay:.3s}
.noise.on .nz-eq i:nth-child(4){animation-delay:.45s}
@keyframes nzbar{0%,100%{height:6px}50%{height:24px}}

.nz-ctrl{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.nz-vol{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--textSoft);font-weight:600}
.nz-vol input{accent-color:var(--accent);width:130px}
.nz-timer{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.nz-timer span{font-size:14px;color:var(--textSoft);font-weight:600;margin-right:2px}
.nz-timer button{
  font-family:var(--body);font-weight:700;font-size:13.5px;cursor:pointer;
  padding:6px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--tint);color:var(--accent2);transition:all .12s;
}
.nz-timer button:hover{border-color:var(--heroB)}
.nz-timer button.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.nz-timer button.off{background:transparent;color:var(--textSoft)}
.nz-count{width:100%;font-size:14px;color:var(--accent2);font-weight:700}

@media (prefers-reduced-motion:reduce){.noise.on .nz-eq i{animation:none}}
@media (max-width:520px){.nz-vol input{width:96px}}